• 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)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    May you link your website?

    Thread Starter Eande

    (@eande)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Eande

    (@eande)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter Eande

    (@eande)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 https://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.

    Thread Starter Eande

    (@eande)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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”.

    Thread Starter Eande

    (@eande)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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;
    }

    Thread Starter Eande

    (@eande)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You could try this

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

    Thread Starter Eande

    (@eande)

    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!

    Thread Starter Eande

    (@eande)

    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.