Autofocus css style sheet for menu size font & picture width

  • Unknown's avatar

    Hi everyone, i just bought the custom design pack,to make some changes, but i thought there was the theme css style sheet in the custom design section, where can i find it?
    otherwise i would like to increase my menu font and i don’t know which style sheet i need( i already try some from wp forum but it doesn’t work) and also the style sheet for increase the size of the pictures below each post, is that possible witht this theme? because i saw it was 800px max for the width :(

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    i thought there was the theme css style sheet in the custom design section, where can i find it?

    The WordPress.com CSS editor is for adding rules. To see the current rules, you should use your built in browser tools such as the web inspector.

    First, make sure you are using an updated browser: http://browsehappy.com/

    If you are using Chrome, check out this link to see how the web inspector works:
    https://developers.google.com/chrome-developer-tools/

  • Unknown's avatar

    otherwise i would like to increase my menu font and i don’t know which style sheet i need

    If you right-click a menu item and select the “Inspect Element” option, it will show you a panel with the HTML for the item you clicked on highlighted as well as all of the CSS that applies to it on the right.

    Before you do that though, check to see if selecting a custom font and adjusting the size in the Appearance → Themes → Customize → Fonts panel works to change the font size how you want.

    i already try some from wp forum but it doesn’t work

    You may have tried CSS that was written for a theme other than AutoFocus. CSS is theme-specific.

  • Unknown's avatar

    and also the style sheet for increase the size of the pictures below each post, is that possible witht this theme?

    The size of a featured images inside posts on the AutoFocus theme are hard coded with an 800px width. You can try adjusting the size little using CSS, but note if you make the size larger it will stretch the image and it could result in lower quality looking images.

    Because the featured images are inside a container with a set width, so you first have to expand the container in order to expand the featured images.

    Here is an example that will expand the main container width for posts and pages and then stretch featured images to fit:

    #content {
        width: 900px;
    }
    
    .single #nav-above .nav-next {
        right: -1000px;
    }
    
    #entry-content {
        width: 70%;
    }
    
    #entry-meta {
        width: 27%;
    }
    
    #post-thumbnail img {
        width: 100%;
    }

    You should also I adjust the Content Width value in the Appearance → Themes → Customize → CSS panel to match the #content size you pick.

  • Unknown's avatar

    thanks you so much! yeas i already tried to change the fonts with the custom design panel but it only change the body and title font, not the menu but i tried the htlm which appears in a box down the page, i don’t know where i change the size, in the main box? or in the little right upper box? or the little down right box? (i tried with the lower right small box, it doesn’t work :(

    hum ok, i just wanted to have post pictures like the featured picture! but it seems to complicated… but thanks for the help!

    and the content width, i tried doesn’t work too…
    i wished wordpress customization was easier! i think im gonna turn into tumblr!

  • Unknown's avatar

    The complexity can vary, depending on your theme choice and exactly what you’re trying to do. :)

    In the custom fonts panel, the font size is adjustable after you select any custom font. It appears just above the selected font and should have a number range when you click on it. The body text setting covers menu font size. I tested it, but it didn’t change the fonts a whole lot. That’s probably because the theme author put some checks and balances into place to prevent people from making them way to big or way too small.

    If you want to override those settings, you can do it with the custom CSS though. Try adding this to your Appearance → Themes → Customize → CSS panel:

    #access {
        font-size: 18px !important;
    }

    Change the 18px value as needed.

  • Unknown's avatar

    i just wanted to have post pictures like the featured picture!

    Do you mean you want to insert pictures one at a time so they’re full-width in the post? If so, just add the images to the body of the post one at a time at full size:

    Working With Images

  • Unknown's avatar

    thank you so much for the font size, it worked!!

    And for the pictures,its inside each post there is the featured post which has a good width, then below there is the text i write and under when i put some other pictures they follow the text column and are smaller, and i would like these pictures as bigger as the featured post if its possible, or maybe the text as well like a large similar block with the featured pictures,text,and below pictures, is that possible?

  • Unknown's avatar

    featured image sorry!

  • Unknown's avatar

    finally i foud the solution!! i made a right click on the small images to open the htlm sheet as you said, i found the width size on the right who was at 100% , it doesn’t changed anything while changing it there,but i copy/past the stylesheet code and copied it into the css panel and changed it at 200%, now it work!!

  • Unknown's avatar

    i would like these pictures as bigger as the featured post if its possible

    Can you try the steps here?
    http://en.support.wordpress.com/images/#insert-an-image-you-have-already-uploaded

    In #5, select the “Full Size” option.

    Note that the original image itself must be large enough to start with.

    If you get stuck, reply back and link to a specific post we can look at as an example.

  • Unknown's avatar

    huh now i have another problem! with the bigger width its displayed on the sidebar…
    http://light-absorption.com/2013/06/29/anja-rubik-2/

    is it possible to remove the sidebar with the date/tags etc?

  • Unknown's avatar

    That’s happening because you set the max width for images to 125% in your custom CSS like this:

    .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail, #content img, #sidebar img {
    	height: auto;
    	max-width:125% }

    Try changing it from 125% to 100%.

  • Unknown's avatar

    is it possible to remove the sidebar with the date/tags etc?

    There are a couple different things you can do. One way would be to set the content column and meta column to be 100% width like this:

    #entry-content {
        width: 100%;
    }
    
    #entry-meta {
        width: 100%;
    }

    Or if you just wanted to completely hide the meta (date/tags etc.), then you could use this instead:

    #entry-meta {
        display: none;
    }

    Keep in mind you can mix and match the rules. You probably need to do some experimenting to figure out what works best for you!

  • Unknown's avatar

    i know! but its the size that i wanted! i think im gonna keep that size,but write bigger blog posts, so the below pictures will fit without touching the sidebar!

  • Unknown's avatar

    thanks for everything :)

  • Unknown's avatar

    i know! but its the size that i wanted!

    Okay, then you need to go back to the first example. :)

    Did you try this example?
    https://en.forums.wordpress.com/topic/autofocus-css-style-sheet-for-menu-size-font-picture-width?replies=16#post-1339183

    Here is a revised version that adds in the 100% widths I added after you asked about moving the post meta:

    #content {
        width: 900px;
    }
    
    .single #nav-above .nav-next {
        right: -1000px;
    }
    
    #entry-content {
        width: 100%;
    }
    
    #entry-meta {
        width: 100%;
    }
    
    #post-thumbnail img {
        width: 100%;
    }

    http://light-absorption.com/ looks great, btw!

  • Unknown's avatar

    Thanks! finally im just gonna make enought content to have the pictures just below the side date bar or just put white background pictures so it will melt in the picture directly!! but thank you for all the tips for the size fonts and pictures width! my blog looks way much better now!

  • Unknown's avatar

    It does! I like the way it has turned out!!

  • The topic ‘Autofocus css style sheet for menu size font & picture width’ is closed to new replies.