The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS to change various aspects of my layout

View previous topic View next topic Go down

CSS to change various aspects of my layout

Post by Soulmonster on February 8th 2013, 1:32 pm

I have a few things I would like to improve regarding the layout of my forum. See picture below for each of the three issues.

1. The banner is not perfectly aligned with the category tables further down, it is slightly adjusted to the right. I have set it to be positioned to the left but there are still some some space to go before it is aligned. There seems to be some border on the background field that prevent it from being in line with the category tables. The text below the banner (the time and option to show new posts) on the left is also askew, but too much to the left. Is there some CSS code that can be used to manipulate these things?

2. Is there some way of changing the height of the the category rows ("row titles")? I would like to make it smaller than it is, basically just a few pixels higher than its text.

3. The widgets that come with the forum are in English although my forum language is Norwegian. It is possible to set the name on personal widgets (see the widget on the bottom) but not on widgets that come with the forum (e.g. "Latest Topics") . Is there any CSS that can be used to change the name of these widgets?

Thanks!


Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Neymar1 on February 8th 2013, 1:40 pm

I'll show you how to do the first 2 for now. I'll get back to you regrading the third as I don't have much time.

1) Add this to the CSS:

Code:
#logo {
  padding: 0 !important;
}

2) Add this to the CSS, and change the "19px" to your liking.

Code:
li.header dl.icon {
  height: 19px !important;
}


Edit: here is your third question. I decided just to do it with jQuery. Add this in Modules>Javascript Codes Management> make sure 'Enable Javascript Code Management' is set to Yes and create a new Javascript with it set in all pages. Then add this for what you want:

Edit: This is the only way I could think of doing it. Add this:

Code:
$(document).ready(function(){
  $(".module .h3:nth-child(2)").text("Text for Latest Topics");
});

(edited box above)


Last edited by Neymar1 on February 8th 2013, 3:15 pm; edited 3 times in total

Neymar1
Forumember

Male Posts : 406
Reputation : 27
Language : HTML, CSS, and a bit of JavaScript
Location : Scotland

http://www.simplyfifa.com

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Soulmonster on February 8th 2013, 2:52 pm

@Neymar1 wrote:Edit: here is your third question. I decided just to do it with jQuery. Add this in Modules>Javascript Codes Management> make sure 'Enable Javascript Code Management' is set to Yes and create a new Javascript with it set in all pages. Then add this:

Code:
$(document).ready(function(){
  $(".module .h3").text("YOUR TEXT HERE");
});

Thanks! Very Happy. But the last solution (for my third problem) changes the title of all widgets. I want to specifically be able to change the title of just some widgets. More specifically, I would like to change the title of the "LATEST TOPICS" and "POLL".

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Neymar1 on February 8th 2013, 2:53 pm

@Soulmonster wrote:
@Neymar1 wrote:Edit: here is your third question. I decided just to do it with jQuery. Add this in Modules>Javascript Codes Management> make sure 'Enable Javascript Code Management' is set to Yes and create a new Javascript with it set in all pages. Then add this:

Code:
$(document).ready(function(){
  $(".module .h3").text("YOUR TEXT HERE");
});

Thanks! Very Happy. But the last solution (for my third problem) changes the title of all widgets. I want to specifically be able to change the title of just some widgets. More specifically, I would like to change the title of the "LATEST TOPICS" and "POLL".

Oh yeah, sorry. I never thought of that. I only tried it out with one widget installed on a test forum. I'll have another look and get back to you. Smile

Edit: This is the only way I could think of doing it. What you said about having a Polls module isn't what I see on your forum, but if you want to add it then let me know and it'll just be a small change. Add this:

Code:
$(document).ready(function(){
  $(".module .h3:nth-child(2)").text("Text for Latest Topics");
});


Neymar1
Forumember

Male Posts : 406
Reputation : 27
Language : HTML, CSS, and a bit of JavaScript
Location : Scotland

http://www.simplyfifa.com

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Soulmonster on February 8th 2013, 5:10 pm

@Neymar1 wrote:This is the only way I could think of doing it. What you said about having a Polls module isn't what I see on your forum, but if you want to add it then let me know and it'll just be a small change. Add this:

Code:
$(document).ready(function(){
  $(".module .h3:nth-child(2)").text("Text for Latest Topics");
});


Thanks but it still changes the title of every widget I have.

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Neymar1 on February 8th 2013, 5:24 pm

@Soulmonster wrote:
@Neymar1 wrote:This is the only way I could think of doing it. What you said about having a Polls module isn't what I see on your forum, but if you want to add it then let me know and it'll just be a small change. Add this:

Code:
$(document).ready(function(){
  $(".module .h3:nth-child(2)").text("Text for Latest Topics");
});


Thanks but it still changes the title of every widget I have.

I'm not too sure how this can be achieved then using CSS from CSS1. The bit I posted used CSS3 which isn't supported by some browsers but that's the only way I could think. I'm interested to see how this can be done.

Neymar1
Forumember

Male Posts : 406
Reputation : 27
Language : HTML, CSS, and a bit of JavaScript
Location : Scotland

http://www.simplyfifa.com

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Soulmonster on February 8th 2013, 5:28 pm

@Neymar1 wrote:I'm not too sure how this can be achieved then using CSS from CSS1. The bit I posted used CSS3 which isn't supported by some browsers but that's the only way I could think. I'm interested to see how this can be done.

That makes two of us Smile

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: CSS to change various aspects of my layout

Post by Soulmonster on February 10th 2013, 9:18 am

I have a couple more things I would like adjusted:



I would like the top of the widget column to be moved down so as to be aligned with the top of the first category row (arrow in red).

And then, with more space available where the widget used to be, move the text shown in yellow all the way to the left.

Can this be accomplished with some nifty CSS?

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum