WordPress.org

Ready to get started?Download WordPress

Forums

Column Shortcodes
[resolved] CSS shortcodes needs a lot of work (13 posts)

  1. intheshallow
    Member
    Posted 1 year ago #

    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/

  2. intheshallow
    Member
    Posted 1 year ago #

    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;
    }
  3. Tobias Schutter
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  4. intheshallow
    Member
    Posted 1 year ago #

    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.

  5. ktevlin
    Member
    Posted 1 year ago #

    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.

  6. intheshallow
    Member
    Posted 1 year ago #

    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

  7. ktevlin
    Member
    Posted 1 year ago #

    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. :(

  8. intheshallow
    Member
    Posted 1 year ago #

    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.

  9. ktevlin
    Member
    Posted 1 year ago #

    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. :)

  10. Tobias Schutter
    Member
    Plugin Author

    Posted 1 year ago #

    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. )

  11. Tobias Schutter
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  12. intheshallow
    Member
    Posted 1 year ago #

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

  13. ktevlin
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.