Need help? Check out our Support site, then


How can I change my widget tittle which appear larger to me in my sidebar?

  1. Hi!

    My website is http://letstrycreating.com.

    1.In my website the widget titles on my sidebar appear to be very large,how can i change the size of the widget tittles?

    2.How can I add color to my widgets or make it look more appealing?

    3.How can I remove the wavy lines below every widget in my sidebar?

    The blog I need help with is letstrycreating.com.

  2. 1. In your custom CSS editor, add the following:

    .wf-active .widget-title {
    font-size: 15px;
    }

    Increase or decrease the font-size according to your preferences.

    2. You can add a background-color to each individual widget using the following CSS:

    .widget {
    background-color: #666;
    }

    Replace the value for the background-color with the hex value for any colour you wish your widget to be. I'm not sure if this is exactly what you want? If not, please give some more details and I'll try to help a bit more.

    3. To remove the wavy lines, include the following in your custom CSS:

    .widget {
    background-image: none;
    }

    Hope that helps. Let me know if there's anything else. :)

  3. hey siobhyb!

    Thanks for your support,with your help I was able to change the font size on the sidebar and the wavy line, however the background color related answer was not exactly what I was looking for but still i tried the command in my CSS to see what the command results too and it made the sidebar look a little too messy...but here it is what i am looking for,
    when you visit my site,on my sidebar my image which has my picture is not framed in the right size like left side of the frame is larger then the right side(vertical side) and the little tittle below the picture that says"Hello I'M NOOR i wish to add background color there or if u have a better suggestion i would love to hear as you are the pro!

    lastly if u can suggest me a better css command to set up my sidebar in a more organized way i would much appreciate it - thanks for giving me your time :)

  4. The image widget doesn't work well in Adelle: apart from the problem with the frame, the image gets cropped when the sidebar becomes narrower. Better use a text widget instead. You can insert the image in a draft post, switch the editor to Text, copy the caption shortcode, paste it into the text widget.

  5. Thanks Guys!

  6. @siohyb: after adding this command using the following CSS:
    .widget {
    background-color: #FFEFD5;
    }

    the entire widget is of the same color now,can you help me precisely to understand how can I use this command to change the background color of each widget separately? or if there is any other command to do so..?

  7. can you help me precisely to understand how can I use this command to change the background color of each widget separately?

    In order to do this, you should learn how to find the unique identifier for each widget.

    First, make sure you are using an updated web browser such as the ones listed at http://browsehappy.com/

    Right click on any widget on your site and select the "Inspect Element" option. Look at the HTML that appears until you find the assigned HTML tag (the one you right-clicked should already be highlighted).

    Here is an example of the opening aside HTML tag from the current widget setup on your site:

    <aside id="text-3" class="widget widget_text">

    The id="text-3" part is a unique identifier for each widget. So, to target just the first text widget in your current sidebar, you would update the CSS from above to something like this:

    #text-3 {
         background-color: yellow;
    }

    Add that as a separate CSS rule at the bottom of your Appearance → Themes → Customize → CSS panel.

    Change the color code as needed.
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

    Also, since you're really getting into CSS, you should totally check out a CSS tutorial like this one! :-) it will teach you about CSS basics including classes and identifiers and how selectors work, which will come in really handy with the work you have been doing.
    http://www.htmldog.com/guides/cssbeginner/

  8. Thanks a ton designsimply :) I will do that.

Topic Closed

This topic has been closed to new replies.

About this Topic