Resource icon

Different titleBar styling per node

Overview Reviews (4) Discussion
Shelley

Shelley

Well-known member
Shelley submitted a new resource:

Different titleBar styling per node - This is a rough guide that will allow you to style your titleBar in the forum_view are

View attachment 62064

Summary: Look at this as a guide since your own node ID's will most certainly differ. Obviously, you would style your own titlebars and use your images styling to your preference

What this enhancement will do is allow you to style your titleBars differently per node and add icons to each part of the titleBar (optional). This enhancement change affects your forum_view area.

Install: The css goes into your EXTRA.css template. But again you...
Click to expand...

Read more about this resource...
 
Last edited:
It's the little things that make a difference :), customizing on a node basis or page basis shows the extra effort on a site, nice guide Shelley.
 
Russ said:
It's the little things that make a difference :), customizing on a node basis or page basis shows the extra effort on a site, nice guide Shelley.
Click to expand...

Thanks Russ. :) Absolutely agree, the little extra effort and minor touches always make the world of difference.
 
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.
hlFaqGi.png



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
 
Last edited:
mauzao9 said:
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.
hlFaqGi.png



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
Click to expand...

I tried using the outline-offset but that didn't seem to yield any positive results. I'm still looking into it but perhaps if someone has the solution they could perhaps post the solution.
 
mauzao9 said:
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.
hlFaqGi.png



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
Click to expand...

Probably a terrible way of doing it but i added padding-bottom: 15px; and that seemed to correct it.
Screenshot_30.webp
 
Shelley said:
Probably a terrible way of doing it but i added padding-bottom: 15px; and that seemed to correct it.
Click to expand...
9owuX8Q.png


I did use what you had already the box shadow inset to make it look like it was, it looks better being a shadow instead of border>outline (what firefox is not supporting here for some reason).
The last challenge to me will be add one background to the right that goes "behind" the title text instead of "collide" with it when responsive active.

Thanks for this, it looks awesome on this dark blocky style we use.
 
Did this on that green banshee style I was doing months and months ago. Didn't even consider releasing it as a resource. . .rather you than me ROFL :D
 
you want to hide the image in responsive that is floated to the right?

you could add something like the following where your class is the classes you want to hide or adjust in some way

Code: 
@media (max-width:@maxResponsiveNarrowWidth)
{ .yourclass {display: none !important;} }
 
Shelley said:
you want to hide the image in responsive that is floated to the right?
you could add something like the following where your class is the classes you want to hide or adjust in some way
Code: 
@media (max-width:@maxResponsiveNarrowWidth)
{ .yourclass {display: none !important;} }
Click to expand...
Not hide, like avforums just did, if you see it with a small window the image keeps floating behind the text instead of collide with it. It's something really nice.
 
mauzao9 said:
Not hide, like avforums just did, if you see it with a small window the image keeps floating behind the text instead of collide with it. It's something really nice.
Click to expand...

I haven't seen it. I think you would be best asking stuart how he accomplished this as I want to keep support in this thread at a minmum. Don't mean to sound harsh but it's a basic guide, a kind of use is as is. :)
 
Nice Resource as always Shelley. I may incorporate this on my new Style. Though I will probably try it with font-awesome instead of images.
 
yavuz said:
Looks awesome @Shelley, thanks for sharing. Can we do this for forum_list node titles as well?
Click to expand...

Sure. If your referring to the categorystrips. I posted a guide that you'll find useful how to do that a while back in this area.

Or use waindigo's add-on if that will do what your after.
 
@Shelley I'm installing it now, would I need to change your css code like this:

Code: 
.class1 .forum_list .titleBar {
  background: #5e29c6; /* Old browsers */
  background: -moz-linear-gradient(left, #5e29c6 0%, #5c2db2 50%, #37206b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5e29c6), color-stop(50%,#5c2db2), color-stop(100%,#37206b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* IE10+ */
  background: linear-gradient(to right, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* W3C */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #59358a;
  box-shadow: 0 0 1px #bb9dc7 inset;}

.class1 .forum_list .titleBar h1 {color: #dfcffc; text-shadow: 0 1px 3px #33163f;}
.class1 .forum_list .titleBar h1:before {
  background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
  content: "";
  padding-left: 45px;}

class1 for node21, forum_view to forum_list?
 
yavuz said:
@Shelley I'm installing it now, would I need to change your css code like this:

Code: 
.class1 .forum_list .titleBar {
  background: #5e29c6; /* Old browsers */
  background: -moz-linear-gradient(left, #5e29c6 0%, #5c2db2 50%, #37206b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5e29c6), color-stop(50%,#5c2db2), color-stop(100%,#37206b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* IE10+ */
  background: linear-gradient(to right, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* W3C */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #59358a;
  box-shadow: 0 0 1px #bb9dc7 inset;}

.class1 .forum_list .titleBar h1 {color: #dfcffc; text-shadow: 0 1px 3px #33163f;}
.class1 .forum_list .titleBar h1:before {
  background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
  content: "";
  padding-left: 45px;}


class1 for node21, forum_view to forum_list?
Click to expand...

This isn't the resource that will accomplish that. This resource however may help you though. http://xenforo.com/community/resources/multi-coloured-node-li.1733/
 
Just a headsup. If you happen to have a description associated with your nodes then the following css for that (or rather classes) is as follows. I've updated the release post to reflect that you may have a description and included the css to style that. (i'm referring to the small text in the screenshot (below) .

Just thought I'd mention that rather than updating the release.

Screenshot_31.webp
 
yavuz said:
You can change the node icon and the background with waindigo's addon but not the color. The one you posted changes the entire node block's color :D I'm no css pro so I was looking for a code if it has lready been shared.
Click to expand...

The css included in the post I linked to does indeed style the whole block, but it also has the css to style the area you are looking to style the way you want it. You'll have to remove some of the css from the other areas that you don't want styled.
 
Last edited:
You must log in or register to reply here.

Similar threads

Code Monkey
Different titleBar styling per node using the TM
Replies
0
Views
1K
Code Monkey
Code Monkey
Shelley
Different Toggle Icons per node
Replies
5
Views
2K
cclaerhout
cclaerhout
Back
Top Bottom