Style hide box

Hello. I want to style the hide box and the quote box separately from the codebox. Is that possible?

You cannot modify the style of the hidden box? Let me double check, but for now can you please provide your forum URL?


PunBB: ACP >> Display >> Colors >> CSS:

Code:

.postmain blockquote {
background: #f4f4f4;
border: 1px solid #ddd;
}

From there you can modify it to whatever best fits you.

Regards,
Sir Chivas.

Sir Chivas™ wrote:You cannot modify the style of the hidden box? Let me double check, but for now can you please provide your forum URL?


PunBB: ACP >> Display >> Colors >> CSS:

Code:

.postmain blockquote {
background: #f4f4f4;
border: 1px solid #ddd;
}

From there you can modify it to whatever best fits you.

Regards,
Sir Chivas.

Sir Chivas, i know that code. I am using that to style the quote box. The only difference is that if i style the codebox, the same style goes to the hidden box.

My forum url is this: http://informationforumgr.forumgreek.com (Its on my profile as well)

Can you please create a test thread where I can see both your code and quote box, thank you.

Which one are you talking about:  quote or hidden box?  The link you posted shows a quote.

i want the hide box but sir chivas wanted a post where he could see the quote and code..

Please post a link to a topic that has a hidden box.

Hello Marios,


For the hide box you can use the following CSS.

Code:

.codebox.hidecode {
    background:red;
    color:blue;
}

.codebox.hidecode dd {
    background:yellow;
}

i have to use both code or just one of them?

If you want to fully style the box, yes.

.codebox.hidecode : is the outer codebox

.codebox.hidecode dd : is the inner codebox

Ange, can i add an extra box on top of the hidden code like the quote?

You would have to manipulate the DT element.

example :

Code:

.codebox.hidecode dt:after {
    content:"Hidden :";
}

that appeared in the code box instead of the hidden box!

oops, that ones for phpbb3. Try this instead :

Code:

.codebox.hidecode dd:first-child:before {
    display:block;
    content:"Hidden :";
}

edit :
I forgot to include first-child, otherwise every dd will have that text before it

That also goes on the code box and it does not show properly to the hidden box

Code:

.codebox.hidecode dd:before {display:block;
    content:"Kρυφό Περιεχόμενο :";
  background: url(https://cdn1.iconfinder.com/data/icons/gnomeicontheme/24x24/stock/form/stock_show-hidden-controls.png) no-repeat darkred;
border-radius: 15px;
box-shadow: 0 0 7px #1f537b;
color: #fff;
display: block;
font-size: 13px;
font-style: normal;
font-weight: 700;
height: 26px;
left: 15px;
padding: 3px 15px;
position: relative;
text-shadow: #000 1px 1px;
top: -26px;
z-index: 100;
width: 270px;
text-align: center;
}

Ange Tuteur wrote:edit :
I forgot to include first-child, otherwise every dd will have that text before it

See my last post, I updated the code. Also, remove overflow:hidden from your hidebox. If it is set to hidden any content that overflows the element will be clipped.

There is no overflow:hidden to the code.

Now it does not appear on the code box but it shows half the box again..



I am using this code now

Code:

.codebox.hidecode dd:first-child:before {
background: url(https://cdn1.iconfinder.com/data/icons/gnomeicontheme/24x24/stock/form/stock_show-hidden-controls.png) no-repeat #8b0000;
border-radius: 15px;
box-shadow: 0 0 7px #1f537b;
color: #fff;
content: "Kρυφό Περιεχόμενο :";
display: block;
font-size: 13px;
font-style: normal;
font-weight: 700;
height: 26px;
left: 15px;
padding: 3px 15px;
position: relative;
text-align: center;
text-shadow: #000 1px 1px 2px;
top: -28px;
width: 194px;
}

Edit: Fixed it. There was one overflow:hidden and as soon as i removed it it was ok! Thank you

SOLVED!!