WordPress.org

Ready to get started?Download WordPress

Forums

Modification of column size (24 posts)

  1. jeremiephoto
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year 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 1 year 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 1 year ago #

    Try clearing your browser cache.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  10. jeremiephoto
    Member
    Posted 1 year 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 1 year ago #

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

  12. jeremiephoto
    Member
    Posted 1 year 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. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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 1 year 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 1 year 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 1 year ago #

    Yes, you should.

  17. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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 1 year 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 1 year 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 1 year ago #

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

  21. Andrew
    Forum Moderator
    Posted 1 year 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 1 year ago #

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

    Thank you very much for your support and patience

  23. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  24. jeremiephoto
    Member
    Posted 1 year 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