XF 1.x How to change style colour

Cyb3r

Customer
I just purchased Core then i noticed there's only the "core" and "core dark" only in the XML folder, how can i change it to another color?
 

Cyb3r

Customer
Also i am wondering if there is any option to make sidebar blocks collapse, i mean like categories.
 

Cyb3r

Customer
The primary color can be changed by going to the color palette and changing xbColor1, it'll change the default orange.

We don't have an option for sidebar blocks to collapse, but you could use: https://xenforo.com/community/resources/toggleme.137/
Hi @Russ, i have another tweak that i wanted to add it to my board and i'm trying for several weeks now without any luck check the picture below:

05062015-3.jpg


How can i use those awesome shadows on messages and nodes list?
 

Cyb3r

Customer
How can i install core dark, can i install it under child core light or not? because i made a lot of tweaks on it and i'm really lazy to do it all over again. :D
 

Russ

Pixel Exit Staff
Sorry @Cyb3r :(

Regarding the shadows, try this in extra.css:

Code:
.nodeList .node.level_1
{
   overflow: visible;
   position: relative;
}
.nodeList .node.level_1:before, .nodeList .node.level_1:after
{
   z-index: 1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 10px;
   width: 50%;
   top: 80%;
   max-width:300px;
   background: #777;
   -webkit-box-shadow: 0 15px 10px #777;
   -moz-box-shadow: 0 15px 10px #777;
   box-shadow: 0 15px 10px #777;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

.nodeList .node.level_1:after
{
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

.XenBase #forums .nodeList
{
   z-index: 20;
   position: relative;
}

For the portal can you link me or get me an account that has permissions
 

Cyb3r

Customer
Sorry @Cyb3r :(

Regarding the shadows, try this in extra.css:

Code:
.nodeList .node.level_1
{
   overflow: visible;
   position: relative;
}
.nodeList .node.level_1:before, .nodeList .node.level_1:after
{
   z-index: 1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 10px;
   width: 50%;
   top: 80%;
   max-width:300px;
   background: #777;
   -webkit-box-shadow: 0 15px 10px #777;
   -moz-box-shadow: 0 15px 10px #777;
   box-shadow: 0 15px 10px #777;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

.nodeList .node.level_1:after
{
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

.XenBase #forums .nodeList
{
   z-index: 20;
   position: relative;
}

For the portal can you link me or get me an account that has permissions
Thank you the code worked just fine, how can i use them with messages?
 

Cyb3r

Customer
Sorry @Cyb3r :(

Regarding the shadows, try this in extra.css:

Code:
.nodeList .node.level_1
{
   overflow: visible;
   position: relative;
}
.nodeList .node.level_1:before, .nodeList .node.level_1:after
{
   z-index: 1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 10px;
   width: 50%;
   top: 80%;
   max-width:300px;
   background: #777;
   -webkit-box-shadow: 0 15px 10px #777;
   -moz-box-shadow: 0 15px 10px #777;
   box-shadow: 0 15px 10px #777;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

.nodeList .node.level_1:after
{
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

.XenBase #forums .nodeList
{
   z-index: 20;
   position: relative;
}

For the portal can you link me or get me an account that has permissions
Hey @Russ , can you tweak this to work on messages please?

I wanted it for messages in first place.
 

Russ

Pixel Exit Staff
I tried to just do it on the message and doesn't seem to be working, I need to step out for a few hours then I'll take another look.
 

Russ

Pixel Exit Staff
Well, not entirely sure how well this will turn on but...

two steps:

extra.css:

Code:
.extraWrapper
{
   background-color: rgb(255, 255, 255);
   overflow: hidden;
   position: relative;
   z-index: 2;
}
html .messageList .message:after
{
   height: auto;
   visibility: visible;
}
.messageList .message
{
   position: relative;
}
.messageList .message:before, .messageList .message:after
{
   z-index: 1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 15px;
   width: 50%;
   top: 80%;
   max-width:300px;
   background: rgba(119, 119, 119, 0.33);
   box-shadow: 0 10px 10px rgba(119, 119, 119, 0.33);
   transform: rotate(-3deg);
}
.messageList .message:after
{
   transform: rotate(3deg);
   right: 15px;
   left: auto;
}
Next go into message template

Right below the <li ... line

add:

Code:
<div class="extraWrapper">
Then at the bottom above the </li> add a closing div:

</div>



I'm sure tweaks will need to be done.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.