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, 6: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 : 4328
Reputation : 430
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 23rd 2014, 7:45 pm

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 23rd 2014, 8:01 pm

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 : 4328
Reputation : 430
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 23rd 2014, 8:08 pm

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 23rd 2014, 8:29 pm







Luffy
Manager
Manager

Male Posts : 4328
Reputation : 430
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 23rd 2014, 8:41 pm

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 : 37233
Reputation : 2493
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Style hide box

Post by Luffy on April 23rd 2014, 9:11 pm

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






Luffy
Manager
Manager

Male Posts : 4328
Reputation : 430
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, 12: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 : 37233
Reputation : 2493
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, 2: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 : 13034
Reputation : 2714
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, 4:22 am

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






Luffy
Manager
Manager

Male Posts : 4328
Reputation : 430
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, 4: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 : 13034
Reputation : 2714
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, 5:09 am

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






Luffy
Manager
Manager

Male Posts : 4328
Reputation : 430
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, 6:43 am

You would have to manipulate the DT element.

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

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
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, 6:51 am

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






Luffy
Manager
Manager

Male Posts : 4328
Reputation : 430
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, 6: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 : 13034
Reputation : 2714
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, 7:03 am

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 : 4328
Reputation : 430
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, 7:06 am

@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 : 13034
Reputation : 2714
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:56 am

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 : 4328
Reputation : 430
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, 11:33 am

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