Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Archived] Spoiler & code design.



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Cesar

Cesar
Punbb Junior
Punbb Junior
What is my question?: Hello  , i want a nice design for quote and code.. Maybe with color #F1E9DC and with a black small icon? Like how i designed the quote :
[Archived] Spoiler & code design. Captur11
Your Forum Address: lemakdesign.forum.st(maintenance)
Forum Version: punBB

Powered by PunBB
Currently 0 users have thanked Cesar for this post:

2
Offline

  mazeko

mazeko
Newbie
Newbie
https://i.servimg.com/u/f56/16/31/78/37/code_p10.png

Some like that?

Code:
Code:

/* CODE BOX , SPOILER & HIDE */
.codebox dt {
    background-image: url('http://icons.iconarchive.com/icons/cornmanthe3rd/plex/16/Communication-messenger-icon.png');
    background-repeat: no-repeat;
    background-position: 2px 3px;
    padding: 3px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF;
    text-shadow: 1px 1px black;
    background-color: #2A2A2A;
}

.codebox {
    border: 1px solid rgba(255,255,255,0.1);
    margin: 1em;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.codebox dd {
    background-color: #CACACA;
    margin: 1em;
    padding: 0.5em;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(255,255,255,0.5) inset;
    border: 1px solid #000000;
    color: #444444;
    text-shadow: 1px 1px rgba(255,255,255,0.6);
}

/* QUOTE */

.postmain cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    margin: 0px 0px 1em;
    background-image: url('http://icons.iconarchive.com/icons/cornmanthe3rd/plex/16/Communication-messenger-icon.png');
    background-position: 2px 4px;
    padding-left: 20px;
    background-color: #2A2A2A !important;
    border-radius: 3px;
    color: white;
    text-shadow: 1px 1px #000000;
}

.postmain blockquote {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.5em 1em;
    background-color: #2A2A2A;
    color: white;
    text-shadow: 1px 1px #000000;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

Very Happy

Powered by PunBB
Currently 0 users have thanked mazeko for this post:

3
Offline

  Cesar

Cesar
Punbb Junior
Punbb Junior
Hiya Mazeko ,
On spoiler , when it's hide how to add somewhere a text like "Open"?

Powered by PunBB
Currently 0 users have thanked Cesar for this post:

4
Offline

  mazeko

mazeko
Newbie
Newbie
Cesar wrote:[link="/t465-spoiler-code-design#2757"]Hiya Mazeko ,
On spoiler , when it's hide how to add somewhere a text like "Open"?

Well, you can add a text on spoiler like that:

Click to Show Content:

Code:

[spoiler=Click to Show Content][/spoiler]

or

Open Spoiler:


Thats what you want? Very Happy

Powered by PunBB
Currently 0 users have thanked mazeko for this post:

5
Offline

  Cesar

Cesar
Punbb Junior
Punbb Junior
A kind of , but i can't force my members to put that title on the spoiler..
Bump?

Powered by PunBB
Currently 0 users have thanked Cesar for this post:

6
Offline

  Shadow

Shadow
Administrator
Administrator
Cesar wrote:[link="/t465-spoiler-code-design#2760"]A kind of , but i can't force my members to put that title on the spoiler..
Bump?
You can add custom spoiler button like the example provided by mazeko.

Reference: https://punbb-design.forumotion.com/t319-javascript-how-to-add-buttons-in-your-sceditor


Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  Virus

Virus
★Moderator★
★Moderator★
[aviso="Thread Archived"]Original poster seems to be inactive and did not respond within 7 days in this thread. Because of this, the topic has been Archived.

If you have further questions, please open a new topic.[/aviso]

Powered by PunBB
Currently 0 users have thanked Virus for this post:

8
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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