Forum Support

Shape 5
March 28, 2024, 11:26:59 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to add category list and word cloud above posts on blog-posts page?  (Read 1136 times)
twarme
Jr. Member
**
Offline Offline

Posts: 46



« on: March 30, 2016, 08:57:55 PM »

Hi! I am attempting to add a category list and word cloud to the top of the pages/blog-posts page included in this template. I can't seem to find where the widget is located or how the posts listed on the page are coded. The text view on the page edit mode shows contact page text. Any area in the template I add a widget it pushes the posts list over to the side or overwrites. How do I edit this page to add a category list and word cloud above the posts listed? Thank you! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: March 31, 2016, 08:35:14 AM »

The page is a placeholder for the main blog, as defined in Settings -> Reading; it doesn't actually use the content at all, it just pulls all blog posts.

To add a widget above the content area, you can use any of the "Above Body"  positions.  A detailed diagram of all positions and their layout is shown on the demo: http://shape5.com/demo/wp/game-world/tutorials/widget-positions/
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
twarme
Jr. Member
**
Offline Offline

Posts: 46



« Reply #2 on: March 31, 2016, 09:55:17 AM »

The page is a placeholder for the main blog, as defined in Settings -> Reading; it doesn't actually use the content at all, it just pulls all blog posts.

To add a widget above the content area, you can use any of the "Above Body"  positions.  A detailed diagram of all positions and their layout is shown on the demo: http://shape5.com/demo/wp/game-world/tutorials/widget-positions/

Aha, I see! Thank you Tristan! I think I tried a couple of those last night. It seemed those position are in columns from what I remember. Any way to split the categories and tag cloud half the page each above the blog posts on the page? Or are there short codes or a way to place widgets defined in this theme in the content area? Something similar to: http://iamtechnologyblog.com/archives-i-am-technology-blog/. Thank you again! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: March 31, 2016, 10:29:17 AM »

Each "set" of positions with similar names is a row, the widgets in that set are columns within that row.  Unless you define custom widths for each column in the theme options, the framework will automatically detect how many columns are active and split them evenly across the row.  Which means, if you use Top Row 1.1 and 1.2, or Above Body 1 and 2, or any other set of 2 positions sharing a specific row, they will each have a width of 50%.

By using Widget Context, you can show or hide specific widgets on any part of your site, and the positions they are in will only appear when the widgets are active, which means you can have any layout you want, just by showing or hiding widgets in various positions.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
twarme
Jr. Member
**
Offline Offline

Posts: 46



« Reply #4 on: March 31, 2016, 10:41:11 AM »

Each "set" of positions with similar names is a row, the widgets in that set are columns within that row.  Unless you define custom widths for each column in the theme options, the framework will automatically detect how many columns are active and split them evenly across the row.  Which means, if you use Top Row 1.1 and 1.2, or Above Body 1 and 2, or any other set of 2 positions sharing a specific row, they will each have a width of 50%.

By using Widget Context, you can show or hide specific widgets on any part of your site, and the positions they are in will only appear when the widgets are active, which means you can have any layout you want, just by showing or hiding widgets in various positions.

Ha, that sounds easy enough! Admitted newb here. I appreciate you Tristan. Thank you for your shared expertise! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: March 31, 2016, 11:06:58 AM »

As a programmer who has been working with WP for a long time, it seems that my explanations aren't always easy to understand; I'm glad I was able to explain in a way that made sense.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
twarme
Jr. Member
**
Offline Offline

Posts: 46



« Reply #6 on: March 31, 2016, 11:41:50 AM »

As a programmer who has been working with WP for a long time, it seems that my explanations aren't always easy to understand; I'm glad I was able to explain in a way that made sense.

You are clear communicator! Thank you! Perfect: there are two sections, half and half. I guess it was maybe not columns, but rather the style found in the CSS perhaps. Would there be a way to configure the post counts in the category list to appear on the same line, instead of a new line? The line breaks makes the list too long with the post counts to display nicely; would look a lot better on the same line. Sorry for silly questions that maybe not even the right question, just trying to figure out how to display site elements as desired. Thank you again! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #7 on: March 31, 2016, 12:51:37 PM »

Can you provide a link to your site, so I can see what you're trying to do?
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
twarme
Jr. Member
**
Offline Offline

Posts: 46



« Reply #8 on: March 31, 2016, 01:32:35 PM »

Can you provide a link to your site, so I can see what you're trying to do?

I am hoping for the post count to be on the same line as the category link. http://new.agrismartinc.com/pages/about-us/blog-posts/ Thank you! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #9 on: April 01, 2016, 07:49:13 AM »

I took a quick look at it with Firebug, and here are a few options I came up with:


This will display the numbers on the left, with the text/links aligned next to them.  Adjusting the width will adjust the size of the gap between the numbers & links, higher % means smaller space between them:
Code:
ul li.cat-item a {
    width: 92%;
    float: right;
    margin-top: 8px;
    margin-bottom: -8px;
}



This will display the links on the left, with the numbers on the far right.  Again, the width % can be adjusted to change the distance, this time smaller is closer:
Code:
ul li.cat-item a {
    width: 92%;
    float: left;
    margin-top: 8px;
    margin-bottom: -8px;
}



This will put the numbers immediately following the links, with a small gap between them.  Adjust the "padding-right" to change the size of the gap:
Code:
ul li.cat-item a {
    float: left;
    margin-top: 8px;
    margin-bottom: -8px;
    padding-right: 5px;
}




The code above can be added to the end of the style.css for the theme, or pretty much anywhere else in the theme CSS.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
twarme
Jr. Member
**
Offline Offline

Posts: 46



« Reply #10 on: April 01, 2016, 09:10:43 AM »

Awesome! Thank you Tristan! The codes with the post counts to the right of the links made the links display in a diagonal, the below link beginning where the above ended. The top code supplied to display the post counts on the left formatted better. The link and the post count are a little off vertically starting with the second line from the top, but it displays much nicer than the counts on a new line! I can live with this. The margin-bottom: -6px; value doesn't seem to have any effect from what I can see. Thank you for your shared expertise! Whatever they are paying you, you surely deserve more! You can tell them I said that. Ha, good luck with that, I'm nobody! Smiley Thank you again! - Trey
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #11 on: April 01, 2016, 09:19:38 AM »

The margin-top can be adjusted to help get the number and link to line up better; the margin-bottom is to counter the spacing added by the margin-top, so that the lines don't end up with a huge space between them.

Hopefully that helps you get it set up exactly the way you want.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.