MyBB Community Forums

How can I change the default colours of the Square Theme, if it's possible please tell me where to go.

-Thanks

for what elements you want to change the colors... basically it should be available in global.css and square.css... search for "background" and change the colors for those parts which you want....

You can go to Templates & Stylesheets, click "Square Theme". You will have several themes listed, but you want to look in global.css and square.css (provided that it is named square.css, it might be called style.css). You can make use of the developer tools feature of the problems, click the element you want to style and it will pop up the editor which will also tell you where the rules (color, background-color, border, etc. - they are all rules) are defined in the stylesheet. You can preview the changes live.

To change the color of the entire theme, you need to search through the Square.css and Global.css, this are the classes you need to modify:

Global.css

a:link, a:visited
a:hover, a:active
.tcat
.trow_sticky
.trow_announcement
button, input.button
button:hover, input.button:hover
.popup_menu .popup_item:hover

Square.css

.catdesc
#header
.menu ul li a:link, .menu ul li a:visited
.menu ul li a:hover, .menu ul li a:active
#panel
.loginbutton a:link, .loginbutton a:visited
.loginbutton a:hover, .loginbutton a:active
.registerbutton a:link, .registerbutton a:visited
.registerbutton a:hover, .registerbutton a:active
.usermenu a:link, .usermenu a:visited
.usermenu a:hover, .usermenu a:active
.wrapper-dropdown-5
.wrapper-dropdown-5 .dropdown
.wrapper-dropdown-5:hover, .wrapper-dropdown-5:active
.wrapper-dropdown-5 .dropdown li:hover a
.admincp a:link, .admincp a:visited
.admincp a:hover
.modcp a:link, .modcp a:visited
.modcp a:hover
.breadcrumb
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb
.breadcrumb .crust .arrow
.breadcrumb .crust .arrow span
.breadcrumb .crust:hover a.crumb
.breadcrumb .crust:hover .arrow span
.scrolltotop
.scrolltotop:hover
.buttons
.buttons:hover
.clickedbuttons
.clickedbuttons:hover
.thead
.theadend
#footer
#copyright
#copyright a:link, #copyright a:visited
#copyright a:hover, #copyright a:active
.one p
.two ul li a:link, .two ul li a:visited
.two ul li a:hover, .two ul li a:active
.three ul li a:link, .three ul li a:visited
.three ul li a:hover, .three ul li a:active
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover
.pagination2 a:link, .pagination2 a:visited
.pagination2 a:hover, .pagination2 a:active
.bigbutton a:link, .bigbutton a:visited
.bigbutton a:hover, .bigbutton a:active
.closedbutton a:link, .closedbutton a:visited
.closedbutton a:hover, .closedbutton a:active
.pbbutton a:link, .pbbutton a:visited
.pbbutton a:hover, .pbbutton a:active
.pbredbutton a:link, .pbredbutton a:visited
.pbredbutton a:hover, .pbredbutton a:active
.minibutton a:link, .minibutton a:visited
.minibutton a:hover, .minibutton a:active
.welcometitle
input.loginbutton
input.loginbutton:hover

And that's all, I put all the custom classes with color (Text, Buttons, Backgrounds, Etc).