May 10, 2013 3:40:34 GMT -5
The purpose of this sticky topic, is to show you some commonly asked for CSS modifications that can easily be achieved in
Proboards V5. If you need help with any of these, please make a new thread in our
proboards board.
Currently the modifications are not sorted into categories, because we don't have that many yet. However, when we have more, the layout for this index will change. When it does, it'll be done so that you can find what you are looking for even easier.
Although you shouldn't need to just yet, use
ctrl+f to search if you can not find something.
If you have any suggestions for modifications you'd like to see here or have one of your own that you think should be in the index, feel free to PM myself (@stinky666) or make a new thread.
Index (Change Colour for Announcements, Sticky's & Locked Topics on the Thread List
Modifying the News Feed (Font & Background)
Add Arrows To Quotes In Posts
Dropdown Menus (Select, Action, Font, Smileys)
Increase/Decrease Gap Size Between Categories
Change the Color For the Horizontal Rule
Change Colours of the Highlight Selection
Add Subject Title To Action Bar in Threads
With thanks to
FallenSamurai for her contribution
May 10, 2013 7:13:58 GMT -5
Change Colour for Announcements, Sticky's & Locked Topics on the Thread ListAdmin > Themes > Advanced Styles & C.S.S > Style Sheet
/* Announcement, Sticky, Locked Thread Link Colours */
.threads .item.announcement .main .link a { color: #55a1cf; font-weight: bold; }
.threads .item.announcement.last > td .main .link a { color: #55a1cf; font-weight: bold; }
.threads .item:hover.announcement .main .link a { color: #969696; font-weight: bold; }
.threads .item:hover.announcement.last > td .main .link a { color: #969696; font-weight: bold; }
.threads .item.sticky .main .link a { color: #dc4043; font-weight: bold; }
.threads .item:hover.sticky .main .link a { color: #969696; font-weight: bold; }
.threads .item.locked:not(.announcement):not(.sticky) { color: #181818; }
.threads .item.locked:not(.announcement):not(.sticky) .main .link a { color: #181818; }
.threads .item.locked:not(.announcement):not(.sticky) .time { color: #181818; }
.threads .item.locked:not(.announcement):not(.sticky) .replies a { color: #181818; }
.threads .item.locked:not(.announcement):not(.sticky) .views { color: #181818; }
.threads .item.locked:not(.announcement):not(.sticky) .user-link { color: #181818 !important; }
Go to the very bottom of the style sheet, create a new line, and paste the above in.
The 1st & 2nd lines above (in blue) are your announcement titles.
The 3rd & 4th lines above (in grey) are for your announcement hover titles.
The 5th line (in red) is for your sticky titles.
The 6th line (in grey) is for your sticky hover titles.
And the remaining lines (in black) are for your locked titles.
Edit the brown parts to the HEX codes you want to use for each.
I have made announcements and sticky topics bold. To remove the bold, simply remove the parts in green.
Once done, hit the
save button.
Modifying the News Feed (Font & Background)Admin > Theme > Advanced Styles & C.S.S > Style Sheet
Scroll down to the very bottom and place your cursor at the end of the last line.
Hit enter 2 times, and then paste the following there (ctrl+c to copy, ctrl+v to paste).
#news {
color: #000000;
font-size: 14px;
font-weight: bold;
background-color: #00a0e2;
}
Green is the text color.
Red is the size of your text.
Brown is the weight.
Purple is the background of where the text is.
If you don't want bold, you can either change the word "
bold" to "normal", or simply remove the line of CSS.
The last statement applies for the rest too. If you don't want them, simply remove them.
Finally, don't forget to click your
save button to finish.
May 10, 2013 8:58:10 GMT -5
Add Arrows To Quotes in PostsAdmin > Themes > Advanced Styles & C.S.S > Style Sheet
Scroll to the very bottom line. Place your cursor and press enter 2 times.
Highlight the below, ctrl+c (copy) and then ctrl+v (paste) it into the new line in the style sheet.
/* CSS Arrows for Quotes (Posts) */
div.message > div.quote { position: relative; background: #3a474d; border: 1px solid #3a474d; padding: 1px; }
div.message > div.quote:after, div.message > div.quote:before { top: 19px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
div.message > div.quote:after { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 11px; left: 0%; margin-left: -20px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }
div.message > div.quote:before { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 13px; left: 0%; margin-left: -25px; margin-bottom:-3px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }
The
brown parts are the hex colours you want your border to be.
The
purple part is how far you want your arrow to be from the top of the quotes border.
The
red part is the RGB Decimal of your border. Go to
colorhexa.com and type in your hex, click search and then
on the left side you should see "RGB Decimal", replace the above "
58, 71, 77" with your one - leave
rgba( and
.0) as they are.
Dropdown Menus (Select, Action, Font, Smileys)Admin > Themes > Advanced Styles & C.S.S > Style Sheet
Scroll to the very bottom line. Place your cursor and press enter 2 times.
Highlight the below, ctrl+c (copy) and then ctrl+v (paste) it into the new line in the style sheet.
/* Menus (Action, Select etc)*/
/* Containers and Dialogs */
.ui-selectMenu-box { .rounded-corners(4px); background-color: #e6e6ee; border: 1px solid #cbcbdf; color: #8ea79f; }
.ui-selectMenu-box .arrow.down > span { border-top-color: #cbcbdf; }
.container > .control-bar > .controls { float: right; padding: 5px; color: #cbcbdf; }
/* CSS Arrows */
.arrow.down { background-color: transparent; border-left-color: #cbcbdf; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_links_color; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_links_color; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_links_color; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_links_color; }
.options_menu, .options_menu ul, .select_menu_list, .select_menu_list ul, .smiley-menu, .smiley-menu ul, .ui-menu-context, .ui-menu-context ul {
border-top-color: #cbcbdf;
border-right-color: #cbcbdf;
border-bottom-color: #cbcbdf;
border-left-color: #cbcbdf;
box-shadow: 1px 1px 1px #181818;
background-color: #e6e6ee;
}
.options_menu li > a, .select_menu_list li > a, .smiley-menu li > a, .ui-menu-context li > a { color: #8ea79f; }
.ui-wysiwyg .button { color: #8ea79f; }
.options_menu li, .select_menu_list li, .ui-menu-context li { background-color: #e6e6ee; }
/* Select Menu Hovers */
.options_menu li:hover > a,
.select_menu_list li:hover > a,
.smiley-menu li:hover > a,
.ui-menu-context li:hover > a {
text-shadow: none;
background-color: #acc5bd;
color: #bc6277;
border-top: #acc5bd 1px solid;
border-left: #acc5bd 1px solid;
border-right: #acc5bd 1px solid;
border-bottom: #acc5bd 1px solid; }
.ui-selectMenu-box:hover .arrow { background-color: transparent; border-left-color: #cbcbdf; }
.ui-selectlist .ui-selectlist-item.state-current {
background-color: #ffffff;
}
Just edit the
hex codes in brown. In your preview pane, be sure to go to a thread or the posting page, so you can see exactly
what edits what. Colours I would recommend having at hand from your theme:
Inner & Outer Border
Primary & Secondary Background
Background
Text
Links
May 10, 2013 9:41:32 GMT -5
Increase/Decrease Gap Size Between CategoriesAdmin > Theme > Advanced Styles & C.S.S > Style Sheet
Go to the very bottom of the style sheet. Create a new line, & paste the below in (ctrl+c & ctrl+v)
.container.boards { margin-bottom: 10px; }
All you need to edit is the part in brown. 0px is no gap at all.
Click the
save button to finish.
Change The Colour For The Horizontal RuleAdmin > Theme > Advanced Styles & C.S.S > Style Sheet
Go to the very bottom of the style sheet. Create a new line, & paste the below in (ctrl+c & ctrl+v)
/* Default Horizontal Rule Colour */
hr {
height: 1px;
background-color: #cbcbdf;
color: #cbcbdf;
border: 0;
}
Simply edit the parts in
brown, to be the new colour. The
green will be the thickness.
Change Colours of the Highlight SelectionAdmin > Theme > Advanced Styles & C.S.S > Style Sheet
When you highlight a selection of text, be it code, or just any thing, don't you wish you could change those
default colours to make them match your forum themes? Now you can, and very easily.
Go to the very bottom of the style sheet. Create a new line, & paste the below in (ctrl+c & ctrl+v)
/* Highlight Selection Colour */
::selection {
background: #acc5bd;
color: #FAFAFA;
text-shadow: none;
}
::-moz-selection {
background: #acc5bd;
color: #FAFAFA;
text-shadow: none;
}
Edit the
brown parts. Whatever colour you make the first 2, put them as the same for the second 2.