Some more questions regarding styling

Divvens

Well-known member
I'm working on a Halloween theme for my board, I must say its much easier the second time xD The first theme I made I needed help in every stage, but I still have a few problems I'm facing I tried to sort it out but...couldn't ^^

First, I want to add the following effect to the sidebar (on the forum home)
Code:
border: 1px solid @pageBackground;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);

If I add it to secondary content, other things like drop down options seem to get a bit messed up. Is there anyway I can apply those settings only to the side bar?

Second,
I am facing this weird problem, I tried everything but can't seem to get the right option to change the on hover colors for the drop down menu links screenshot attached.
theprob.webp


Third,
I want to change the image size (of forum icons read/unread/links) to 50x50, I had come across this option before but after looking over the styling options I can't seem to find the option again xD Can someone tell me where is the option to change the sizes from 40x40 to 50x50?
 
For the sidebar you can apply styling to each block (e.g. <div class="section membersOnline userList">) - use Firebug to determine the classes and add the markup to EXTRA.css.

For point 2, try adding this to EXTRA.css:
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus

For the node icon: Style Properties -> Forum List -> Node Icon
 
For point 2, try adding this to EXTRA.css:
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus
The other two seem to be sorted out, thanks ^^

But this one is still giving me a problem, I added that line to the extra.css, nothing changed. Added the following:
Code:
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus
{
background-color: #281e3a !important;
text-decoration: none;
}

And still nothing changed! The hover background color is still the same. Am I doing something wrong?
 
This is working for me:
Code:
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus {
background-color: #cc0000;
}

It's possible that particular menu isn't using the same default classes as that is an add-on.
 
I added that to the extra.css, even the help drop down links dont seem to change. Neither does the forum drop down menu. Could this be due to something conflicting with an add-on?
 
It's more than likely something with your style.

What does Firebug show when inspecting the elements?

Edit: I was just able to change it in Firebug on your default style so the classes are the same. Are you sure you're applying the code to the correct template/style?
 
I am adding it to the extra.css for the style I need (correct one).

Hmm, can you tell me if this is something that can be changed in the templates? Maybe I have done something there...
 
Sorry for double posting, but its the same problem even on pages. I am sure it was ok before, but now the hover acts the same way on page navigation as well.
 
Even my co-admin can seem to change it on firebug >.< but if I add it to the extra.css (And I'm adding it to the right theme's css) it just doesn't seem to work. Is there a way to change it from style properties?

If not can I give you my account pw by pm so that you can see whats wrong? I'm totally lost I tried changing the color to white/black adding !important ahead but nothing seems to change the on hover bg color
 
For some reason, the markup in EXTRA.css isn't being applied.

So I just changed it in Style Properties -> Popup Menus -> Menu Link, Hover State: Background Color

You can change the password now and reapply the .htaccess protection :)
 
Thanks Brogan ^^ Sorry for giving you all the trouble.

It's weird, the other codes in EXTRA.css seems to have applied but this just wasn't working.

Should that have also changed the alerts onhover bg color and conversation onhover bg color? Since that still stays the same while on hover. Can that be changed via properties as well?
 
No, that's a separate class: .navPopup .PopupItemLinkActive:hover
You will have to use EXTRA.css for it though as there's no Style Property available.
 
Hmm the extra.css changes are not being applied at all...>.<
Could this be a server side problem (I don't think so but I don't know whats causing the problem xD)
 
Ok Brogan I spotted the problem! I BLAME THIS -> }

It was missing in one of the earlier css edits in EXTRA.CSS which wasn't applying anything we were doing omg I feel like such a fool for not noticing that!
 
Ah, good spot.

I didn't actually check the existing code, although I probably should have...

Using a text editor helps to identify issues such as that. I use Notepad++.
 
For the sidebar you can apply styling to each block (e.g. <div class="section membersOnline userList">) - use Firebug to determine the classes and add the markup to EXTRA.css.

About that, would it be something like this in the extra.css
Code:
.section membersOnline userList
{
border: 1px solid @pageBackground;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);
}

or
Code:
#section membersOnline userList
{
border: 1px solid @pageBackground;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);

I'm kinda noobish with css xD
 
Top Bottom