Support Forum

Making CSS appearance changes…

GR gringojason
gringojason
Member

Hello…

Thanks to your guy’s help, I have gotten things rolling and have all the major components of my forum together. Now I want to start tweaking the appearance of some of the elements. I have already created my own theme that I will be editing. To get started, I want to reduce the height of the Group headers of the main forum page. For instance, in the case of your forum, the red area where it says “Simple:Press 5 General Topics” and has the “Forum RSS” button. I tried to find the element with Firebug (still new at it) and could not find it. Where is the code I need to edit to reduce the height? Thanks…

11 Answers

New Answer

BR Brandon
Brandon
Member

Good question.

First a quick way for you to explain which forum page you are on. The 3 main ones are the Group View page which is what you see or may call the forum home page.

Next is Forum View which is what I believe the page you are talking about. Then Topic View which is this page. The names used are also similar as the php files that create those views in your theme. spGroupvVew.php, spForumView.php and spTopicView.php.

Looking at the breadcrumbs it would be like this:

2012-06-21_17h24_28.jpg

 

In regards to your question and using the example of what you see here. The red background in Forum View is not an independent header and then the the elements added below it. It is actually a red background that goes all the way down under the full list of topics. Then the topic list and other stuff are layed on top of the red background.

So the top where you see the icon, the RSS button and the name/description is only as tall as the info it shows.

Using here as an example, if the forum description was removed the red area would shrink because it does not have to show that line.
If you are displaying a forum description you could try turning that off first. If not enough you could remove or reduce the size of the icon and then maybe reduce the size of the text for the forum description.

GR gringojason
gringojason
Member

Brandon…thanks for the info. I am talking about the Group View page. I understand what you are saying about it being a red background vs independent header and how adjusting the elements will reduce the size. However, if you look at your guy’s Group View page on this forum and then look at my Group View page, you see that there is more space on my page between the bottom of the description and the bottom of the red. I am wondering what element is causing this extra space. I even removed the RSS buttons. It is not a big thing, but I am wanting to tighten up the look the forum and that is just extra unused space. I like the way that your guy’s looks. Any ideas on what is causing the extra space and how I can change it? Thanks…

MP Mr Papa
Mr Papa
Member

your wp theme is driving the styling… putting large padding under images…  this css

#single div.postcontent p, #single div.postcontent img {
    margin-bottom: 14px;
}

at line 390…

so in your sp theme, you probably want to override and set it back to 0 or something…

BR Brandon
Brandon
Member

I went to you forum page and no groups or forums are showing at all as a guest. Not sure if you want that. 🙂

The deal with your space problem is not really SP related but CSS in your WordPress theme leaking through. It is affecting the icon in the header part and also causing an issue with the user avatar image and the way the arrow images don’t line up in the breadcrumbs.

This is being caused by this rule in your WP theme styles.css file.

#single div.postcontent p, #single div.postcontent img
 margin-bottom: 14px;

If you change the margin to 0 you should see the difference on all those images.

YS Yellow Swordfish
Yellow Swordfish
Member

This is caused by your WP theme ‘leaking’ into the forum. If you look at your theme stylesheet you will find this directive:

#single div.postcontent p, #single div.postcontent img {
    margin-bottom: 14px;
}

And that is causing the large gap at the bottom of the group header.

You could try adding a new rule like:

#single div.postcontent #spMainContainer img {
    margin-bottom: 14px;
}

see if that overrides it…

GR gringojason
gringojason
Member

Thanks guys. I added that CSS to my WP theme and the forum looks great. Everything tightened up a bit. Brandon…I noticed it affecting the headers on the group view page and also space within the breadcrumbs (both fixed now), but I did not notice the avatar issue you mentioned. What was that? Also…you should be able to see and read the forum posts as a guest (there are 8 guests on there right now)…so I am not sure why you were not able to see it. I logged out to check and was able to see the forum without issue. Please let me know if I am missing something. Thanks… 

BR Brandon
Brandon
Member

Looks much better now.

Re: Avatar… The way it was before there was more space (14px) below the avatar on the top left of the header and the search form than you have now.

I am seeing the Group view fine now. Don’t know why I didn’t the other day.

GR gringojason
gringojason
Member

Awesome. Thank you. Under the same subject of CSS changes, how can I get the “looks like the avatars are speaking in a comment bubble” effect that you guys have here on the individual posts you in this forum? I love that and would like to add it. Thanks… 

MP Mr Papa
Mr Papa
Member

ancient secret… wink

its just some css, but a bit tricky…  please see this topic:  https://simple-press.com/support-forum/sp5-general-topics/is-the-fancy-callout-arrow-next-to-your-avatar/

where we walked someone else through how to do it…

GR gringojason
gringojason
Member

Beautiful. Just finished it and it looks great. Thanks for the help!!