Support » Themes and Templates » Why can't I center widget titles?

  • Resolved Eande

    (@eande)


    Hi everyone,

    I’ve tried every code I’ve found by applying it to my ‘edit css’ in my appearance section to centre my widget titles, for example,
    h2.sidebartitle {
    text-align: center;
    }

    plus every other code I’ve tried, by placing and pressing ‘preview’ but nothing is working…
    Can anybody please help me?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    May you link your website?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Is this what you want
    http://awesomescreenshot.com/0dffejv9f ?

    wow!
    yes! For the tabs perfect!
    Except where the navigation bar tabs have a colour on them, I wanted to do the whole bar one colour but it was too thick with the search bar (I cant seem to get rid of) and the navigation had little boxes around the tabs, so I gave up and I restored everything, but every time I edit CSS it comes back again. Can you see the purple colour there?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Okay let’s finish off one problem before starting another.
    To centre your widget titles, try this CSS;

    .dbx-handle.plain-borderless {
     text-align: center;
    }

    Your Widget Titles each have this HTML

    <h3 class="dbx-handle plain-borderless">...</h3>

    So your previous CSS attempt had the wrong HTML selector and the wrong class, which was why your CSS wasn’t applying.

    Except where the navigation bar tabs have a colour on them

    Which colour should the navigation bar tabs have? I assume you mean font colour.

    Wow that’s Brilliant! Thank you so much! :)I’m so happy! I was trying for a week!

    Well, I initially tried to change the font and colour of my post and page titles, I even tried to go through my control panel but it wasn’t working.
    I attempted for a long time to create bar for the navigation menu like you see in twenty 11 themes but the search bar makes it really thick and I can’t take it away

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try

    #nav ul.sf-menu, #nav-top ul.sf-menu {
     width: 100%;
     background-color: #FCF5FF;
    }

    If you want the gradient like Twenty Eleven theme, play around with this CSS3 gradient generator http://www.colorzilla.com/gradient-editor/ . The code will be generated.

    I also recommend you use Google Chrome’s Inspect Element tool, or Firefox’s Firebug tool, when testing out CSS. You’re able to view the HTML structure and apply CSS to that structure.

    Thank you Andrew!

    I think the gradient is far too advanced for my rookie skills for now…
    What I meant by Twenty Eleven theme was how the bar didn’t have boxes around the text in the headers? See how mine are now white? Is that possible with this theme?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    After applying the width of 100% and background color of #fcf5ff from my last post, you could then add

    #nav ul li, #nav.continuous ul li, #nav ul ul li, #nav.continuous ul ul li, #nav ul li a, #nav.continuous ul li a, #nav a.current li a, #nav.continuous a.current li a {
     background-color: transparent;
    }

    To remove re-occurrence of these “boxes around the text”.

    I pasted it in, still in the same bracket but when i preview or update it removes the code and reverts to the original

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I’m sorry, this

    #nav ul li, #nav.continuous ul li, #nav ul ul li, #nav.continuous ul ul li, #nav ul li a, #nav.continuous ul li a, #nav a.current li a, #nav.continuous a.current li a {
     background-color: transparent;
    }

    Should be outside of the bracket.
    E.g

    #nav ul.sf-menu, #nav-top ul.sf-menu {
     width: 100%;
     background-color: #FCF5FF;
    }
    
    #nav ul li, #nav.continuous ul li, #nav ul ul li, #nav.continuous ul ul li, #nav ul li a, #nav.continuous ul li a, #nav a.current li a, #nav.continuous a.current li a {
     background-color: transparent;
    }

    Ah, sorry. I didn’t realise.

    I’m dying to press the resolved button because that’s exactly what I was looking for! However the drop down menus are transparent and I looked on suffusion options- navigation bar and it says ‘custom style – white’.
    How can they change like this if they are written in the editor in Appearance?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You could try this

    #nav ul ul li, #nav ul ul li a, #nav ul ul li a:visited {
     background-color: white;
    }

    You are a legend!

    Thank you soooo much! That’s exactly what I was looking for. Really I would never have been able to work these codes out alone I can’t tell you how much I appreciate all your help!

    I am having a problem with the navigation bar. After all these codes worked beautifully in my website, I have tried to include a navigation bar at the top of the page. Editing it via suffusion options/skinning to customise the look but nothing happens! Now I have nasty boxes and big grey background colours.
    So I tried to edit a CSS where it shows my changes in the preview, but if I update my stylesheet nothing changes?
    Can anyone please tell me why and what I can do please?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Why can't I center widget titles?’ is closed to new replies.