Adelle Theme – Customizing with css

  • Author
  • #1501437


    Hi, I am using the Adelle theme and customizing with css. Can you please help with the following?

    – How do I change the font size and color of the title of my posts?

    – How do I center the items in the menu bar below the blog title?

    – After I tried to center my social network in the sidebar (I have 2, facebook and twitter), on the iPad the icons are in 2 rows instead of 1. It looks ok from PC browser’s. How do i fix this? This is what I added to center:

    #social-networks {
    text-align: center;
    #social-networks ul {
    display: inline-block;

    – When viewing my blog on Internet Explorer, my sidebar is not on the side of the page, but shows up on the bottom my page below my posts. Also the fonts don’t look right, and even the post dates that are a circle become a square. How do I fix this?

    Thanks for your help.

    My blog is:

    The blog I need help with is



    Hi there,

    I’ve moved your other post into the CSS Customization Forum, which you can find here:

    There, you will be able to find help with CSS questions from those who have expertise in customizing blogs.

    In the future, please queries only once.



    Hi there, you can change the font sizes at Appearance > Customize > Custom Fonts, or you can add the following CSS and adjust the fonts size there.

    .wf-active .entry-title, .wf-active .entry-title a {
    font-size: 27px;

    To center the menu, add the following. The @media rule limits the centering to over 600px, which is where the menu gets simplified for tablets and phones.

    @media (min-width: 601px) {
    .menu {
        text-align: center;
    .menu ul {
        display: inline-block;


    @rich (re the 600px limit): does this apply to Adelle in particular or to all responsive themes?



    Thanks, this worked for me.


    @justpi, responsive width themes are a little all over the place on the @media rules. You kind of have to play with the theme to see where things change. Some change at 1024 and then again at 768 and sometimes at 480 and also 320. It just depends on the design of the theme, and some themes need adjustments to the layout at even different points.


    The Firefox Web Developer toolbar add-on has a nice feature where from the “resize” dropdown you can ask it to show the window size in the title bar, which I use all the time to see when things change.



    If there’s so much variety, I guess I’ll start consulting the updated stylesheet of each theme as found here:


    @justpi, you are welcome, and that isn’t a bad idea. I consult them all the time to see how and where the @media rules are and what they do.



    I have the theme Adelle and costumizing. Is There anyway to get the full stylesheet?

    Or possible to do following….

    1. A header that is wider and higher so its the same as the “black thing under it”
    2. Headline in uppercase
    3. Change color sidebar

    My blogg


    @bloggfridaz, I would suggest taking a quick look at our How to Find Your Theme’s CSS support page and look at the brief screencast about the web inspector in your browser. It is a great help when doing CSS changes and allows you to find the CSS for the element that you want to change.

    1. It would take number of steps, including creating a new header image and then inserting it into the CSS instead of uploading it at Appearance > Header. What I might suggest trying is to make the ribbon for the menu the same width as your header image. Add the following CSS and see what you think.

    .site {
        max-width: 64.95em;

    2. I expect you are talking about post and page titles. Add the following to make them uppercase.

    .entry-title {
        text-transform: uppercase;

    3. If you are talking about the background color of the sidebar, add the following and then edit the color code as desired.

    .site-main .widget-area {
        background: #F8F8F8;

    If I misunderstood anything or if you have further questions, please let me know.



    That was good help! Thanks :)
    what is the code for header because i wanna make it larger, now its 250px and i wanna make one 350px maybe


    The Adelle theme has a flexible height header built in. So to use a taller header image, first create an image that is 1040 x 350 pixels and then upload that image at Appearance > Header and choose the “Skip Cropping” option or adjust the crop area to the height you want when you get to the cropping step.


    Can I add an instagram link alongside our other social media links, or change out one of the current links to be an instagram?!


    sunflowerslace, on the Adelle theme? The Adelle theme does not have an option to add Instagram built in.

    But separate from the theme options, there’s a way to add an Instagram badge to the sidebar which you can see here:

    And if you wanted something fancier, this help page explains how to add your own social media icons to any theme:

    If you need further help with CSS, please start a new thread so that we keep each set of questions separated. It makes them easier to search back through later.


    @sunflowerslace, the sites linked to your username are using Forever and My Life, and I don’t see any social icons on either. Can you let us know which site you are talking about please and where you want to add the instagram social media link?


    G’day @designsimply. I should have refreshed. :)



    I am wondering how I can move the header and the rest of the content down enough to accommodate a background.gif that has a height of 200px? (Instead of the pink bubbles that is the default background.gif)

    The original is 45px, but I can’t find anything that has that as a margin.



    I managed to get it to work by adding this to all the /* .header */ parts.
    .header {margin-top: 180px;}


    I just got this theme and I’m not very proficient in coding and whatnot so please bare with me! I really want to get rid of the search bar that is in the black ribbon in top right hand corner and I cannot for the life of me figure out how to get rid of it!

The topic ‘Adelle Theme – Customizing with css’ is closed to new replies.