WordPress.org

Ready to get started?Download WordPress

Forums

Modification of column size (24 posts)

  1. jeremiephoto
    Member
    Posted 2 years ago #

    Hello,

    Do you know how to modify column size ?
    I'm using "target" theme, a two-sized theme and want to increase left-column size and reduce right-column size.

    Here is the link to my website http://www.jeremiephoto.fr

    You can see column size on "a propos" page.

    Thanks in advance.

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Be aware that making changes to theme files is never a good idea -- use a Child Theme or custom CSS plug-in instead. Otherwise all your changes will be erased when the theme is updated. Once you have that set up, add this CSS code:

    #content #left-col {
        padding: 20px 16px 20px 0;
        width: 620px;
    }
    
    #content #right-col {
        padding: 3px;
        width: 307px;
    }

    You'll need to change the widths and/or padding to suit your preferences.

    Also, making changes like this may affect the layout of other pages. If you want the changes to only affect his page, you can add the page id to the selectors:

    body.page page-id-4 #content #left-col { ....
    
    body.page page-id-4 #content #right-col { ....
  3. jeremiephoto
    Member
    Posted 2 years ago #

    Thanks for your support.

    I tried to change widht in #content #left-col and #content #right-col but no change on my website.
    did I forgot something ?

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    Try clearing your browser cache.

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    There are no changes visible in your CSS...where did you make them? Also, you have no content in the right column so nothing will show on the page.

    You also have some mark-up errors that may be causing problems -- looks like your footer.php file is missing??
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jeremiephoto.fr%2Fa-propos%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  6. jeremiephoto
    Member
    Posted 2 years ago #

    Dear Andrew, I tried without effect

    WPyogi, I changed

    #content #left-col {
    padding: 20px 16px 20px 0;
    width: 620px;
    }

    #content #right-col {
    padding: 3px;
    width: 307px;
    }

    into

    #content #left-col {
    padding: 20px 16px 20px 0;
    width: 820px;
    }

    #content #right-col {
    padding: 3px;
    width: 107px;
    }

    without effect. I removed this in order to avoid other problems.

    Add to this, I don't understand your feedback about footer.php
    I get an eye into your links, but don't find the appropriate file ( my footer.php file hasn't 193 lines ... )

  7. Andrew
    Forum moderator
    Posted 2 years ago #

    Your changes did have an effect, your left column has a width of 620px etc.
    Unless you have no regard to update the theme, move your modifications into a Child Theme.

  8. jeremiephoto
    Member
    Posted 2 years ago #

    Andrew, yes my left column has a width of 620px, but if I put 820px for example, the left column has still a width of 620px ... It's my problem :(

  9. Andrew
    Forum moderator
    Posted 2 years ago #

    It'll be easier to debug the issue if you add changes to a Child Theme.

  10. jeremiephoto
    Member
    Posted 2 years ago #

    What do you mean by child theme ?

    Also I made modification, agree with you it will be better for you to help me ...

  11. Andrew
    Forum moderator
    Posted 2 years ago #

    Instead of a Child Theme, do you have a Custom CSS plugin?

  12. jeremiephoto
    Member
    Posted 2 years ago #

    I only have css file named style.css

    Sorry if it's not the answer to your question but my english isn't fluent ..

  13. the left column has still a width of 620px ...

    there might be other styles restricting the content width;

    for instance:

    .post-entry {
    	width:620px;
    	float:left;
    	padding-bottom: 10px;
    	padding-top: 10px;
    	overflow: hidden;
    }

    css customisation can be tedious - using a browser inspection tool such as Firebug will help immensely to find out what styles are formatting what elements.

    hint:
    it is a good idea to leave any suggested edits in the site until you get feedback from somebody in the forum; it helps helping ...

  14. Andrew
    Forum moderator
    Posted 2 years ago #

    As expressed by WPyogi, you shouldn't be editing the theme's files.
    Download and activate a Custom CSS plugin and transfer your modifications to the area allocated by that plugin (in the dashboard).

  15. jeremiephoto
    Member
    Posted 2 years ago #

    Ok, if I understand what you say, I must download Custom CSS plugin on my wordpress website and use this to force CSS modifications ?

  16. Andrew
    Forum moderator
    Posted 2 years ago #

    Yes, you should.

  17. I don't understand your feedback about footer.php

    for instance, your 'contact' page's html output stops suddenly with:

    </div>
    <!--content end-->
    
    </div>

    there should be more like </body> etc which is usually output by footer.php;

    does your (page.php ?) template have a <?php get_footer(); ?> code at the end?

  18. jeremiephoto
    Member
    Posted 2 years ago #

    I put

    #content #left-col {
    padding: 20px 16px 20px 0;
    width: 920px;
    }

    #content #right-col {
    padding: 3px;
    width: 7px;
    }

    into CSS custom manager, I can see an effect on my website but no modification of left column

  19. Andrew
    Forum moderator
    Posted 2 years ago #

    Your left column now has a width of 920px, excluding the padding.
    http://snag.gy/oCLSg.jpg

    You ought to be using a Browser Inspector tool like Firebug to test out CSS modifications.

  20. jeremiephoto
    Member
    Posted 2 years ago #

    Ok thanks, my question is why the text didn't go from 0 to 920 now ?

  21. Andrew
    Forum moderator
    Posted 2 years ago #

    You have another, smaller width on a <div> HTML element wrapping your text. You can find these issues out with Firebug.

  22. jeremiephoto
    Member
    Posted 2 years ago #

    Ok, I'm downloading Firebug.
    I will keep you informed about my result.

    Thank you very much for your support and patience

  23. jeremiephoto
    Member
    Posted 2 years ago #

    After one week of optimization, I succeed !!!

    I want to thank you for all your support

    Please find the result at http://www.jeremiephoto.fr

    Don't hesitate to post feedback if you want, thanks again again and again

Topic Closed

This topic has been closed to new replies.

About this Topic