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.

Style hide box

View previous topic View next topic Go down

Solved Style hide box

Post by Luffy on 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?

Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

Post by Sir Chivas™ on 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™
Support Moderator
Support Moderator

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

Back to top Go down

Solved Re: Style hide box

Post by Luffy on 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)

Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

Post by Sir Chivas™ on 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™
Support Moderator
Support Moderator

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

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 24th 2014, 1:29 am







Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

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

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


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


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Style hide box

Post by Luffy on 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..






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

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

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


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


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 24th 2014, 9:22 am

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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 24th 2014, 10:09 am

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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

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

You would have to manipulate the DT element.

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 24th 2014, 11:51 am

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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 24th 2014, 12:03 pm

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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Style hide box

Post by Luffy on 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..



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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Style hide box

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

Topic Solved & Locked.

Sir Chivas™
Support Moderator
Support Moderator

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

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