HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Change the background color of tab boxes ?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#84477 (In Topic #17446)
Avatar

Well-settled

Ok, I really am trying to figure this out myself but I need help if anyone would be so kind  :$
I am using 8 RC7

I need to change the background color of the tab  boxes as you can see in this image


Thanx
Gerald

Making games is fun…having people play them is the reward!
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobSLiked by JeanLiked by Fletch)  
Rating:
#84483
Avatar

Community saint

I hunted it down. It is a background image that can be found in global css

Code

.tab { float: left; background: url('{$IMG;,tab}') !important; padding: 3px 7px 0 7px !important; height: 20px; text-align: center; cursor: pointer; }
Back to the top
 
Posted
Item has a rating of 5 (Liked by Brian Hay)  
Rating:
#84486
Avatar

Well-settled

Your awesome Brian, Thanx.

I just had to replace edit the theme image:  themes/default/images/tab.png

Much Better :thumbs:

Making games is fun…having people play them is the reward!
Back to the top
 
Posted
Rating:
#84496
Avatar

Community saint

Thanks guys, that was the only thing I search for also.  :thumbs:


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Brian HayLiked by BobSLiked by JeanLiked by sholzy)  
Rating:
#84503
Avatar

Community saint

Since that was so quick and succinct an answer from Brian I think it took care of the immediate issue raised by Tisnart (and Harry).

Here is a little extra, in case somebody finds it useful …

Admin tabs
User\'s tabs

… achieved by editing global.css by adding the bits in red …
.tab {
   float: left;
   background: url('{$IMG;,tab}') !important;
   padding: 3px 7px 0 7px !important;
   height: 20px;
   text-align: center;
   cursor: pointer;
   border-radius: 0 15px 0 0;
   box-shadow: 0 0 10px 1px rgba(92,156,172,0.9) inset;

}

The colours are specific to my colour scheme, but if you think you can use the idea, simply change the RGB values for the box-shadow entry.

Enjoy!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#84510
Avatar

Well-settled

Cool,
So this would overwrite the image or just applies the colors to that image?

Making games is fun…having people play them is the reward!
Back to the top
 
Posted
Rating:
#84515
Avatar

Community saint

Neither will over write the image, just add some color/style to it.

Border radius:
http://www.w3schools.com/cssref/css3_pr_border-radius.asp

And the box shadow:
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp 

Cool stuff, thanks Fletch!
Back to the top
 
Posted
Rating:
#84518
Avatar

Community saint

Cool thanks all. I only tested the theme on ocp 7 since I didn't havce time to wrestle with RC releases so the tabs wasn't part of my CSS (that I know of)
Back to the top
 
Posted
Rating:
#84521
Avatar

Community saint

very nice indeed Fletch, its more stylisch. Thanks for the tip


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by sholzyLiked by Brian HayLiked by Jean)  
Rating:
#85022
Avatar

Well-settled

I have been messing around with this and just thought I'd share my results  ;) (I like it much better now)

This is what I did:
Changed the image:themes/default/images/tab.png
so it looks like this:


Then edited the global.css to this:

.tab {
   float: left;
        background: url('{$IMG;,tab}') !important;
        padding: 3px 7px 0 7px !important;
        height: 20px;
        text-align: center;
        cursor: pointer;
   border-radius: 0 10px 00;
   box-shadow: 0 0 10px 1px rgba(255,176,30,0.9) inset;
}


I ended up with this:


I think it looks great with my dark theme (Duck's Dark Marshall)

Thanx for everybody's help on this  :thumbs:

Making games is fun…having people play them is the reward!
Back to the top
 
Posted
Rating:
#85023
Avatar

Community saint

Good work!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#85095
Avatar

Community saint

Ermmmmm…

You aren't finished yet, Tisnart!

I've just discovered the tabs in the IM/Chat feature, which need to be addressed separately by editing chat.css (… and now that I mention it, there are probably tabs in other areas that I need to seek out).

Not too difficult to edit since you already have your CSS edited for the other tabs, but it is freakin' difficult holding a conversation with yourself just to get the various windows to display - especially to check the 'before'n'after' effects!

Have fun.

 :lol:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#85096
Avatar

Well-settled

Hehe, thanx Fletch.
Ill keep ya posted on my progress :)

Making games is fun…having people play them is the reward!
Back to the top
 
Posted
Rating:
#85099
Avatar

Community saint

Yes it a nice layout.  Good job Tisnart!


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by Jean)  
Rating:
#104007
Avatar

Fan in training

More examples on CSS Box Shadow.....http://www.corelangs.com/css/box/shadow.html

Helsy




Back to the top
 
Posted
Rating:
#104010
Avatar

Community saint

helsywarner said

More examples on CSS Box Shadow.....http://www.corelangs.com/css/box/shadow.html

Helsy






point up

boomarked


Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: