Need help? Check out our Support site, then


Adelle Theme - Customizing with css

  1. 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: http://saltnchili.com

    The blog I need help with is saltnchili.com.

  2. Hi there,

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

    http://en.forums.wordpress.com/forum/css-customization

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

    In the future, please queries only once.

    Thanks!

  3. 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;
    }
    }
  4. @Rich (re the 600px limit): does this apply to Adelle in particular or to all responsive themes?

  5. Thanks, this worked for me.

  6. thesacredpath
    Staff

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

  7. thesacredpath
    Staff

    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.

  8. Thanks!
    If there's so much variety, I guess I'll start consulting the updated stylesheet of each theme as found here:
    https://wpcom-themes.svn.automattic.com/

  9. thesacredpath
    Staff

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

  10. 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 http://fridaz.se/

  11. @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.

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

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

  14. sunflowerslace
    Member

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

  15. 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:
    http://en.support.wordpress.com/instagram/instagram-badge/

    And if you wanted something fancier, this help page explains how to add your own social media icons to any theme:
    http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

    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.

  16. @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?

  17. G'day @designsimply. I should have refreshed. :)

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

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

  20. 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!

  21. @foreverme1994, I see at http://southernbeautybelle.wordpress.com you have gotten the search bar removed. Congratulations!

  22. Hello, how can I remove the text in the footer? thank you!

  23. thesacredpath
    Staff

    @magavengeance, if you are talking about the WordPress.com and Theme credits in footer, those have to remain visible at WordPress.com per the Terms of Service (#11).

  24. Question, is there way to add a separate series of posts on another page within the same website? When I create a new page it appears to be a regular page vs the blog style format. thanks!

  25. @rodrigueze120, since you are asking about a different topic than discussed in this thread, can I ask you to start a new thread in the CSS support forum so as to avoid confusion for those coming to this thread in the future? Many thanks in advance. What you want to do can most certainly be done.

  26. @rodrigueze120, the only site associated with your username is http://elliewinks.com, which is a self-hosted WordPress installation and not hosted here at WordPress.com. There is a separate forum at WordPress.org for the self-hosted version of Adelle at: http://wordpress.org/support/theme/adelle . Post your question there and they will help you with it.

  27. Hello! I have 2 questions:

    1. How do I remove the search tool from the menu?

    2. How can I make my pages full-width? I do not want any widgets on the right and would like to remove that space.

    http://www.landrums.com

    Thanks!

  28. thesacredpath
    Staff

    It looks like you are using WordPress but you are not hosted here at WordPress.com. I would suggest posting in the WordPress.org volunteer-based Adelle Theme forum.

    For general questions on WordPress.org self-hosted installations, you can post in the main WordPress.org forums.

Topic Closed

This topic has been closed to new replies.

About this Topic