The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Style hide box

4 posters

Go down

Solved Style hide box

Post by TheCrow April 23rd 2014, 11:14 pm

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Sir Chivas™ April 24th 2014, 12:45 am

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™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 1:01 am

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)
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Sir Chivas™ April 24th 2014, 1:08 am

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

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 1:29 am

TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by SLGray April 24th 2014, 1:41 am

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


Style hide box Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 2:11 am

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by SLGray April 24th 2014, 5:41 am

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


Style hide box Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur April 24th 2014, 7:26 am

Hello Marios,


For the hide box you can use the following CSS.
Code:
.codebox.hidecode {
    background:red;
    color:blue;
}

.codebox.hidecode dd {
    background:yellow;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 9:22 am

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur April 24th 2014, 9:42 am

If you want to fully style the box, yes.

.codebox.hidecode : is the outer codebox

.codebox.hidecode dd : is the inner codebox
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 10:09 am

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur April 24th 2014, 11:43 am

You would have to manipulate the DT element.

example :
Code:
.codebox.hidecode dt:after {
    content:"Hidden :";
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 11:51 am

that appeared in the code box instead of the hidden box! lol!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur April 24th 2014, 11:59 am

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 Razz
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 12:03 pm

That also goes on the code box and it does not show properly to the hidden box
Style hide box 4Dfgcaf

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;
}
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur April 24th 2014, 12:06 pm

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

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by TheCrow April 24th 2014, 3:56 pm

There is no overflow:hidden to the code.

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

Style hide box TNqk6SK

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!!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Sir Chivas™ April 24th 2014, 4:33 pm

Topic Solved & Locked.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Back to top


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