Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Use Content Column Classes
- This topic has 16 replies, 3 voices, and was last updated 9 years, 5 months ago by Genesis Developer.
-
AuthorPosts
-
October 25, 2014 at 10:12 am #129106pauloliverMember
I have been trying to use the content column classes on a page and on a post.
I have followed your instructions: http://my.studiopress.com/?s=using+column+classes and copied your instructions on the page or post and the css code on to the style.css file and no matter how many columns i want to display, all I get is a continuous paragraph.
I have copied the css code in the style.css file after the /***** Content ***************/
I am using the Lexicon child theme.
Thia is what I entered in the page:
<div class="one-third first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>and this is how it displays:
Column Test
How to Use Content Column Classes
In Genesis we have added the ability to create columns (column classes) within the content area.
Below you find instructions on how to use content column classes.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.The URL included may not work as I have saved the page as a "Draft"
Can someone help please
http://jerseyislandblog.com/column-test/October 25, 2014 at 10:16 am #129109Brad DaltonParticipantTry this and add the HTML to the text editor, not the visual editor http://wpsites.net/web-design/creating-content-columns-in-wordpress-posts-pages/
No need to add CSS
October 25, 2014 at 10:26 am #129111pauloliverMemberHi braddalton
I always use the HTML text editor not the visual editor.
I use Genesis Version: 2.1.2 · Released: July 15, 2014
I have also tried deleting the code that I had inserted into the style.css file (as the code is supposed to be included in the Genesis) but is still showing as a paragraph
October 25, 2014 at 10:49 am #129115pauloliverMemberHi braddalton
Thank you very much
I always use the HTML text editor not the visual editor.
I use Genesis Version: 2.1.2 · Released: July 15, 2014
I have also tried deleting the code that I had inserted into the style.css file (as the code is supposed to be included in the Genesis) but is still showing as a paragraph
October 25, 2014 at 11:29 am #129128Genesis DeveloperMemberCan you again enter this in your HTML editor
<div class="one-third first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div> <div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div> <div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
October 25, 2014 at 11:43 am #129134pauloliverMemberHi genwrock,
I have tried your suggestions (which looks exactly the same as I had entered) and this is the preview of the post:
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.And yes.... I have cleared the browser's cache.
Nothing seems to be working. Could it be to do with the Lexicon child theme?
Many thanks
October 25, 2014 at 11:49 am #129135Genesis DeveloperMemberCan I get your page link once?
October 25, 2014 at 11:53 am #129136Genesis DeveloperMemberPlease double check your style.css file. this code is existing in your style.css file.Also you'll clear your cache and check the site again.
October 25, 2014 at 12:08 pm #129138pauloliverMemberHi genwrock,
Very much appreciate your time.
I have checked and re-checked the style.css file and the code is there.
I have also cleared the the browser's cache and purged the post from the web's cache.
Still displaying as above
October 25, 2014 at 12:20 pm #129139Genesis DeveloperMemberThen I am not getting any idea. Hope that anyone will check your issue and give the other idea.
But personally I am not using the HTML code for columns in WP Editor. I am creating shortcode for columns using Genesis Columns CSS and it is working for me. You can see my any PRO theme for demo.
Best of luck. HAVE A GOOD WEEKEND.
October 25, 2014 at 12:35 pm #129143pauloliverMemberHi genwrock.
Can you give me an idea on how to create the shortcode for columns using Genesis Columns CSS
Looking at your demos, the 3 columns displayed on your Hello! We are think is exactly what I am after
Your help would be very much appreciated
Many thanks
October 25, 2014 at 12:46 pm #129144Genesis DeveloperMemberAdd the following code in your functions.php file
/* ============= Three Columns ============= */ function pwdtheme_shortcode_one_third($atts, $content = null) { extract(shortcode_atts( array('first' => 'no'),$atts) ); if($first == "no"){ $class = "one-third"; } else { $class = "one-third first"; } return '<div class="' . $class . '">' . pwdtheme_remove_wpautop($content) . '</div>'; } add_shortcode( 'one_third', 'pwdtheme_shortcode_one_third' );
Now add the content this way in your visual or html editor
[one_third first="yes"] you could edit this to put information about yourself [/one_third] [one_third] You can create as many posts as you like in order to share with your readers what exactly is on your mind.[/one_third] [one_third]This is an example of a WordPress post,[/one_third]
October 25, 2014 at 12:51 pm #129145pauloliverMemberThank you ever so much.
I will give it a try now and let you know how it works
It might be too much to ask...
How could I get 4 columns?
Very much appreciate your trouble
Once again many thanks
Regards
October 25, 2014 at 1:06 pm #129149pauloliverMemberHi genwrock,
I have added your code to the functions.php file and I the the content in the HTML editor and when I tried to view the post I got the following error:
Fatal error: Call to undefined function pwdtheme_remove_wpautop() in /home/jersey28/public_html/wp-content/themes/lexicon/functions.php on line 53
I have now deleted the code in the functions.php file.
Can you give me an idea of what I can do?
Many thanks
October 25, 2014 at 1:09 pm #129151Genesis DeveloperMemberSorry for this. try this new one
/* ============= Three Columns ============= */ function pwdtheme_shortcode_one_third($atts, $content = null) { extract(shortcode_atts( array('first' => 'no'),$atts) ); if($first == "no"){ $class = "one-third"; } else { $class = "one-third first"; } return '<div class="' . $class . '">' . $content . '</div>'; } add_shortcode( 'one_third', 'pwdtheme_shortcode_one_third' );
October 25, 2014 at 1:26 pm #129153pauloliverMemberHi again,
I have tried the above and that's how it displays (instead of 3 columns, it displays them below each other)
Like this:
you could edit this to put information about yourself
You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post
Sorry, for some reason it doesn't seem to work
Once again, thanks
November 6, 2014 at 11:51 am #130697 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.