Serenity Theme – how to create a new widget?

Community Forums Forums Design Tips and Tricks Serenity Theme – how to create a new widget?

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Tamaralas 4 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #93971

    Tamaralas
    Participant
    Post count: 2

    Hi everyone.

    I would like to replace the slider area on the home page of the Serenity theme to make it a text area. The problem with simply adding a text widget is that the background color takes on the background color of the theme, as you can see here: http://usafitnesscenter.net

    I have tried changing the background color of the slider wrapper. I have also tried moving the slider to above content rather than below header. (I used the code that was posted about a year ago, but the solution was not correct in that it removed the slider area altogether.)

    I’m fairly new to WP, so I need a pretty basic (as in beginner level) explanation. Similarly, I’m not sure I’m using the correct labels, so please let me know if you need clarification.

    Thank you in advance for any help.

    http://usafitnesscenter.net
    #93989

    anitac
    Participant
    Post count: 7041

    Instead of adding another new widget area, you just need to add some styling. Your widget ID is Text-36. So you target that specifically, so add this to the bottom of your style sheet.

    #text-36 {
        background-color: #FFFFFF;
        border: 10px solid #EEEEEE;
        height: 250px;
        margin: 0 auto;
        padding: 10px;
        width: 900px;
    }

    Keep in mind, if you remove that text widget or add something different – you will need to change the “text-36″ ID to whatever the new ID is for the new element.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #94003

    Tamaralas
    Participant
    Post count: 2

    Hi Anitac,

    Thank you for your reply. I entered your code and got an error, so I experimented to see if part of it would work and it did. Will you see what happened at http://usafitnesscenter.net ? Maybe #text-36 is just that first bit of text that says:

    USA Fitness Center of Southeastern Massachusetts
    A full service health facility with two convenient locations

    since it’s the only portion that shows the white background.

    It’s odd, yes? The area is set up like a widget – I can see it as a widget area and add a text widget to it – but it doesn’t act like one.

    Thank you again. I appreciate you thinking about this.

    #94004

    anitac
    Participant
    Post count: 7041

    What type of error did you receive? Did you place it in the Style.css file? That’s where it should have gone.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #94019

    Tamaralas
    Participant
    Post count: 2

    Anitac,

    You are correct. When I went back to duplicate the error, it worked perfectly! Looks like the error was mine. Thank you for your help. If you don’t mind, how did you know the widget was called text-36?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.