How to change style colour

[Cyb3r]

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]

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

 

[Russ]

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/

 

[Cyb3r]

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:

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

 

[Cyb3r]

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.

 

[Russ]

Yep install it as a child of the light style , that will work perfectly.

 

[Cyb3r]

Yep install it as a child of the light style , that will work perfectly.

What about the shadows, do you have any idea how to do it?

 

[Cyb3r]

Yep install it as a child of the light style , that will work perfectly.

Responsive design is not working properly on my homepage with XenPorta see the pic below:

 

[Cyb3r]

Any response?

 

[Russ]

Sorry @Cyb3r

Regarding the shadows, try this in extra.css:

.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]

Sorry @Cyb3r

Regarding the shadows, try this in extra.css:

.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]

Sorry @Cyb3r

Regarding the shadows, try this in extra.css:

.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]

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.

 

[Cyb3r]

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.

Any progress?

 

[Russ]

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

two steps:

extra.css:

.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:

<div class="extraWrapper">

Then at the bottom above the </li> add a closing div:

</div>



I'm sure tweaks will need to be done.