WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
add 3rd column no widgets? or vary sidebar, no widgets! (16 posts)

  1. susanarinderle
    Member
    Posted 1 year ago #

    Hi! Been using WP for months for two blogs, and am now migrating an existing website to WP. I like 2011 BUT I want to be able to:

    1. Add a third column into which I can put text (not widgets!)

    OR

    2. Put content into sidebar that is NOT widget-oriented.

    I am more savvy than the average person and know a little html, but that's it. I want a look similar to my current site: http://www.susanarinderle.com.

    I know what php files are and have read quite a bit on here about page templates and adding columns but have no clue where to put files if/when I create the code for a new column.

    Thanks!

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    1. Add a third column into which I can put text (not widgets!)

    Considering the number of pages in your current site, if you are ok with HTML, you can also wrap your side content in a div with a class and style that section in CSS.

    OR

    You can try this plugin
    http://wordpress.org/extend/plugins/grid-columns/

    2. Put content into sidebar that is NOT widget-oriented.

    I'm not sure if you are aware that there is Text widget ( available in WP as default ) that you can use to write your own HTML or any text, and there is Widget Logic plugin that you can use to control the appearance of each widget based on your logic.
    http://wordpress.org/extend/plugins/widget-logic/

    In other words, you can have a per page sidebar.

  3. susanarinderle
    Member
    Posted 1 year ago #

    Thanks paulwpxp!

    1. Please translate "in a div with a class and style that section in CSS"?

    2. I did discover the text widget! However, I can't do graphics or images there it seems, and it can only vary by template, not by page, correct?

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    "in a div with a class and style that section in CSS"?

    In editor, switch to Text mode instead of Visual mode, you can write basic HTML in there. In this case you would write content normally and then wrap whatever you want in a div with a class like this

    <div class="mymaincontent">
    main content is here,text and images
    </div>
    
    <div class="mysidecontent">
    side content is here, text and images
    </div>

    and in style.css of your child theme or in your Custom CSS plugin, you just style them using that classes to make the page appear as content and sidebar.

    text widget can't do graphics or images there it seems

    In Text widget you can do both text and images using HTML. Also, instead of Text Widget, there is also WYSIWYG widget available in plugin section.

    it can only vary by template, not by page, correct?

    Widget Logic plugin can assign appearance of widget based on page template, page, post, category and combination, whatever WP conditional tag has to offer. See usage in plugin section.

  5. susanarinderle
    Member
    Posted 1 year ago #

    Thank you!!!!!!!!!!

  6. susanarinderle
    Member
    Posted 1 year ago #

    Hi! I've been using the html code to create the columns and that seems to be working well. However, now the pages that have the columns aren't responsive to smart phones! Those pages look all ugly on mobiles. How do I fix this?

  7. susanarinderle
    Member
    Posted 1 year ago #

    Let me clarify, this is the code I'm using (I vary height and width depending on what I'm going for):

    <div style="margin: 5px; padding: 15px; width: 500px; height: 1500px; float: left;">
    </div>

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I would avoid inline CSS to start with as you cannot use that easily with media queries.

  9. susanarinderle
    Member
    Posted 1 year ago #

    Hi! I don't understand what you mean, please break it down?

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    This is inline CSS. it defeats the purpose of Cascading Style Sheet because you can only use it once, and difficult to maintain.

    <div style="background:red;">Hello</div>

    Do this instead

    <div class="mytitle">Hello</div>

    and in style.css which is linked to in the html's head

    .mytitle {background:red;}
  11. paulwpxp
    Font hero
    Posted 1 year ago #

    In web design, the height of containing element should not be set, height of containing element varies based on content inside it. This is true to Fixed Width Web design and also Responsive Web Design.

    The width of containing element, in RWD, should be set in percentage only. AND you can make it span full 100% in certain screenwidth ( for mobile ).

    So we have main and side content like this.

    <div class="mymain">my main content</div>
    <div class="myside">my site content</div>

    in CSS we should have something like this

    .mymain {width:70%;float:left;}
    .myside {width:25%;float:right;}

    and to make those become full width in small screen, use media query like this

    @media screen and (max-width: 600px) {
    	.mymain, .myside {width:100%;float:none;}
    }

    Change 600px to your liking, it's the breaking point.

  12. susanarinderle
    Member
    Posted 1 year ago #

    Ok I am freaking out! :) So is this right:

    In the text section of my pages, change divstyle to divclass. Name the div class something in quotes. In style.css (WHERE??) I put the name of the div class, preceded by a period, and the specs of that div class in {}

    So far correct?

    If so, then in the specs for each div class (how about column 1 and column 2?)I put width and float %. Correct?

    But what about when this isn't the same on each page? What about when I want more space between the columns?

    Totally lost about media query....

    I'm a newbie, please forgive my basicness!

  13. paulwpxp
    Font hero
    Posted 1 year ago #

    [..] So far correct?

    Yes, that's mostly fundamental of CSS. The period stands for "class", there are many sites that provide the doc that you could read.

    In style.css (WHERE??)

    style.css is a file that tells browsers how to display each element of that webpage.

    In WP, you could see (and edit) style.css of your theme under Appearance > Editor, but no body will recommend anyone to make direct changes to theme, unless you know what you are doing.

    Direct changes made to theme will get overriden when the theme is updated, so we use child theme to hold modifications.
    http://codex.wordpress.org/Child_Themes

    For only some CSS work, instead of using child theme, you could use one of these Custom CSS plugin.
    http://wordpress.org/extend/plugins/search.php?q=custom+css

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    But what about when this isn't the same on each page? What about when I want more space between the columns?

    Most themes use body_class() in its <body> tag
    http://codex.wordpress.org/Function_Reference/body_class

    All you need to know is that each page of WP has specific classes in the <body> tag, so you could style any element within each page differenly using this format.

    .bodyclass .classinmyelement {selector:property;}

    For example, your Testimonial page has this class "page-id-12" in its <body>, so we could style our earlier example differenlty for this page like this.

    .page-id-12 .mymain {width:50%;float:left;}
    .page-id-12 .myside {width:50%;float:right;}
  15. susanarinderle
    Member
    Posted 1 year ago #

    Thank you! This all sounds very complicated and time consuming to do correctly. What would be the easiest way to just make sure my pages with columns look OK on smartphones?

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    For the question asked in the OP, and considering the number of static pages in your site, I can't think of anything else better.

    and yes, thank you for saying that web design is very complicated and time consuming. It's true but most people would think the otherwise.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic