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?
avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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.
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6801
Reputation : 433
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)
avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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.
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6801
Reputation : 433
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






avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2715
Language : English
Location : United States

https://fmthemes.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..





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40197
Reputation : 2715
Language : English
Location : United States

https://fmthemes.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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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?





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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?





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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 :";
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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!





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

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





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Solved Re: Style hide box

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

Topic Solved & Locked.
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6801
Reputation : 433
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