Support » Plugin: Column Shortcodes » CSS shortcodes needs a lot of work

  • Resolved intheshallow

    (@intheshallow)


    Don’t get me wrong, I do love using the short codes for my clients to use, but the CSS needs a lot of work. For example: the css should have spacing right off the bat. Not sure why you wouldn’t. Also, you do have last_column which is very useful, but I found no CSS for it.

    There are also a lot of spacing problems when it comes to certain percentages. For instance: if you use two_thirds and then one_thirds_last, the percentages are a bit off as both have margin-right to it which isn’t needed.

    I am taking the liberty to completely re-write the CSS. If anyone reads this, I’ll add my coding in here when I finish it up.

    http://wordpress.org/extend/plugins/column-shortcodes/

Viewing 12 replies - 1 through 12 (of 12 total)
  • From all of the variables that fit with each other, I have all percentages at 100%. Took me a little time but I think it should all work as long as you use the percentages properly.

    For instance:

    If you want two_fifth, use it with three_fifth_last.

    Another example: one_forth, use three_forth_last. You can even use one_forth for 4 columns. Just do: one_forth, one_forth, one_forth, one_forth_last and you have a perfect 100%.

    If I missed a variable, let me know and I will fix it.

    .one_half, .one_third, .two_third, .one_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth
    {
    	float: left;
    }
    
    .clear_column
    {
    	display: block;
    	width: 100%;
    	height: 0px;
    	line-height: 0px;
    	font-size: 0px;
    	overflow: hidden;
    	clear: both;
    }
    
    .one_half
    {
    	width: 49%;
    	margin-right: 2%;
    }
    
    .one_half.last_column
    {
    	width: 49%;
    	margin-right: 0px;
    }
    
    .one_third
    {
    	width: 32%;
    	margin-right: 2%;
    }
    
    .one_third.last_column
    {
    	width: 32%;
    	margin-right: 0px;
    }
    
    .two_third
    {
    	width: 66%;
    	margin-right: 2%;
    }
    
    .two_third.last_column
    {
    	width: 66%;
    	margin-right: 0px;
    }
    
    .one_fourth
    {
    	width: 23.5%;
    	margin-right: 2%;
    }
    
    .one_fourth.last_column
    {
    	width: 23.5%;
    	margin-right: 0px;
    }
    
    .three_fourth
    {
    	width: 74.5%;
    	margin-right: 2%;
    }
    
    .three_fourth.last_column
    {
    	width: 74.5%;
    	margin-right: 0px;
    }
    
    .one_fifth
    {
    	width: 18.4%;
    	margin-right: 2%;
    }
    
    .one_fifth.last_column
    {
    	width: 18.4%;
    	margin-right: 0px;
    }
    
    .two_fifth
    {
    	width: 39%;
    	margin-right: 2%;
    }
    
    .two_fifth.last_column
    {
    	width: 39%;
    	margin-right: 0px;
    }
    
    .three_fifth
    {
    	width: 59%;
    	margin-right: 2%;
    }
    
    .three_fifth.last_column
    {
    	width: 59%;
    	margin-right: 0px;
    }
    
    .four_fifth
    {
    	width: 79.6%;
    	margin-right: 2%;
    }
    
    .four_fifth.last_column
    {
    	width: 79.6%;
    	margin-right: 0px;
    }
    
    .one_sixth
    {
    	width: 15%;
    	margin-right: 2%;
    }
    
    .one_sixth.last_column
    {
    	width: 15%;
    	margin-right: 0px;
    }
    Plugin Author Tobias Schutter

    (@tschutter)

    Thanks for taking the time to look into this. I will have a look at your CSS, and include it in the next patch.

    Thanks!

    No problem. I’ve been using my coding on quite a few pages. It seems to be working just fine. If you find something wrong with it, let me know. I can edit it if you’d like.

    This looks right but it’s not working on a commercial template I’m customizing:

    http://www.shoparilla.com/demo4/options

    Any thoughts?

    Thanks!

    You can ignore this! I just separated “last” on style and it works perfectly. I’ve been working on another template that uses “last” as part of the style definition and didn’t think to keep it separate.

    ktevlin. You’re not using what I mentioned to do. When you are ending the row, you need to use one_fourth_last, not one_fourth. Using one_fourth at the end of the column is adding the extra right margin. You’re also not allowing the clearfix to come into play.

    Always keep in mind to use one_fourth_last or two_third_last etc when you’re on the last column of that row.

    Example:

    4 Columns should look like:

    one_fourth, one_fourth, one_fourth, one_fourth_last

    2 Columns:

    one_half, one_half_last

    When I do that, see what happens?

    http://www.shoparilla.com/demo4/

    I know it SHOULD work. I’ve used similar shortcodes. But it isn’t working on this template. 🙁

    Hmmmm. Maybe it was being overwritten by another code? When I test it, I did it on my own template. The template that you’re using usually has shortcodes on it.

    I know. I think you’re right. It’s not the plugin it’s my commercial template. I finally gave up and have ordered a full suite plugin from themeforest. I hope that one works. If not, I suspect I’ll be learning how to create my own templates. lol. Thanks for your help. 🙂

    Plugin Author Tobias Schutter

    (@tschutter)

    It seems that your theme’s style.css is being loaded before the shortcodess.css stylesheet. This means the current styling from shortcodes.css will get priority.

    The easiest/savest way to fix this for now would be to prefix the CSS. Take intheshallow’s CSS and change each line like so:

    current:

    .one_third { ... }

    new:

    #content .one_third { ... }

    This will only work for your theme/markup, because it depends on the ID “content” to be present.

    ( Other options would be to load style.css at the end of you HTML header, but i don’t know if that would trigger other issues with you styling. )

    Plugin Author Tobias Schutter

    (@tschutter)

    Another solution which will work for all themes, but is less ‘elegant’, would be to add “!important” to each CSS value.

    current:

    .one_half {
    	width: 49%;
    	margin-right: 2%;
    }
    .one_half.last_column {
    	width: 49%;
    	margin-right: 0px;
    }

    new:

    .one_half {
    	width: 49% !important;
    	margin-right: 2% !important;
    }
    .one_half.last_column {
    	width: 49% !important;
    	margin-right: 0px !important;
    }

    Make sure to repeat this for all size: .one_third, two_third etc. etc.

    Yup. Both solutions should do the trick. Depends on how you’d like to handle it.

    thank you both so much! I’ll try everything this afternoon and let you know how things turn out. 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘CSS shortcodes needs a lot of work’ is closed to new replies.