Message Title Enhancement

Message Title Enhancement v1

No permission to download
I haven't tested it on the imperial style. I don't own a copy of it but I shouldn't see why it wouldn't work.
 
Shelley, I appreciate you don't have time to help but could you possibly post a link to somewhere that you have it working so I can see for myself what's different?
 
And I've realised my mistake. I assumed it was meant to work for all nodes, for example http://www.bbsmiley.com/forums/rank-icon-packs.18/

Nope, those adjustments I posted specifically alter the area without it affecting other areas because people may want to style them differently. But yeah your going to have to use .forum_view instead of .page_container (whatever it's called) for those areas.

edit: PVO_Dave already posted it. :)
 
Following a message from kkm323, I thought I'd share my settings incase you are trying to keep the site fairly stock looking (like mine).

Code:
/* THREAD VIEW TITLE BAR ENHANCEMENTS */
 
.thread_view .titleBar {
    border: 1px solid #a5cae4;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #ffffff !important;
    background-color: #f0f7fc !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.thread_view .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #000000;
}
 
.thread_view .titleBar #pageDescription a{
  color: #000000;
  font-weight: bold;
}
 
/* THREAD VIEW TITLE BAR ENHANCEMENTS */
 
/* FORUM VIEW TITLE BAR ENHANCEMENTS */
 
.forum_view .titleBar {
    border: 1px solid #a5cae4;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #ffffff !important;
    background-color: #f0f7fc !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.forum_view .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #000000;
}
 
.forum_view .titleBar #pageDescription a{
  color: #000000;
  font-weight: bold;
}
 
/* FORUM VIEW TITLE BAR ENHANCEMENTS */
 
/* PAGE VIEW TITLE BAR ENHANCEMENTS */
 
.pagenode_container .titleBar {
    border: 1px solid #a5cae4;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #ffffff !important;
    background-color: #f0f7fc !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.pagenode_container .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #000000;
}
 
.pagenode_container .titleBar #pageDescription a{
  color: #000000;
  font-weight: bold;
}
 
/* PAGE VIEW TITLE BAR ENHANCEMENTS */
 
/* FORUM LIST TITLE BAR ENHANCEMENTS */
 
.forum_list .titleBar {
    border: 1px solid #a5cae4;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #ffffff !important;
    background-color: #f0f7fc !important;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.forum_list .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #000000;
}
 
.forum_list .titleBar #pageDescription a{
  color: #000000;
  font-weight: bold;
}
 
/* FORUM LIST TITLE BAR ENHANCEMENTS */
 

Attachments

  • threadview-bg.webp
    threadview-bg.webp
    88 bytes · Views: 22
Just thought of somewhere else to modify :)

Implemented and tested

.conversation_view
.conversation_list
 
Just thought of somewhere else to modify :)

Implemented and tested

.conversation_view
.conversation_list

I was looking in there earlier today. Some other areas:

.member_list
.online_list
.news_feed_page_global
.find_new_threads

There's other within the tabLinks you could style whether it is worth it remains to be seen.
 
I think I've just opened a wormhole :(

Haven't tested these yet, but...

.find_new_threads
.search_form_post
.search_results
.member_list
.online_list
.news_feed_page_global
.help_index
.help_about_us
.help_smilies
.help_bb_codes
.help_trophies
.help_cookies
.help_terms

All of this is without going through the account section, tonnes of them in there, what have you started! lol
 
I think I've just opened a wormhole :(

Haven't tested these yet, but...

.find_new_threads
.search_form_post
.search_results
.member_list
.online_list
.news_feed_page_global
.help_index
.help_about_us
.help_smilies
.help_bb_codes
.help_trophies
.help_cookies
.help_terms

All of this is without going through the account section, tonnes of them in there, what have you started! lol

ROFLMAO - that made my day. :LOL:(y)

All I'll say is people can knock themselves out with that one. On a serious note, in some areas i wouldn't imagine it makes sense styling the h1 (not worth it in my opinion). I think thread_view benefits from it because it highlights the area and people are generally in that area more than they would say for example .account_personal_details :LOL:
 
True, true, I'm not normally one of those people who get's obsessive over things... but it'd look nice if everything was the same wouldn't it...

Time to step away from the keyboard for tonight I think before I'm copying and pasting like a demon in extra.css! :D
 
You could associate all the h1 as one instance. forum_list .titleBar h1, ,thread_view titleBar h1, etc_etc titleBar h1

It would save on a bloat extra css template if one was inclined to style every page

Code:
.help_index .titleBar h1, .help_smilies .titleBar h1 , .help_bb_codes .titleBar h1, .help_trophies .titleBar h1, 
.help_cookies .titleBar h1, .help_terms .titleBar h1 {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #1982b9; /* Old browsers */
background: -moz-linear-gradient(top, #1982b9 0%, #036496 50%, #014d75 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1982b9), color-stop(50%,#036496), color-stop(100%,#014d75)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* IE10+ */
background: linear-gradient(to bottom, #1982b9 0%,#036496 50%,#014d75 100%); /* W3C */
    border: 1px solid #00293f;
    border-radius: 5px;
    padding : 10px;
    text-align: center; 
    color: #fff;
    text-shadow: 0 0 0 transparent, 0 1px 2px #002c43;
}
 
Oohhhh, this could save a lot of bother!

I'll have another look at trying to gather all of the title areas of the weekend and supply them back in here, for the forum makeover mod this is turning in to! :)

Think it adds quite a lot to the design
 
First test of that didn't work, I'll have a play at the weekend.

Thanks for the modification and all the help Shelley!
 
Here's another css3 alternative colour (Blue) with the gradient image attached in the attachment manager for older browser fallback.

View attachment 32772


Code:
/* THREAD VIEW TITLE BAR ENHANCEMENTS */
 
.thread_view .titleBar {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #1982b9; /* Old browsers */
background: -moz-linear-gradient(top, #1982b9 0%, #036496 50%, #014d75 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1982b9), color-stop(50%,#036496), color-stop(100%,#014d75)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1982b9 0%,#036496 50%,#014d75 100%); /* IE10+ */
background: linear-gradient(to bottom, #1982b9 0%,#036496 50%,#014d75 100%); /* W3C */
    border: 1px solid #00293f;
    border-radius: 5px;
    margin:0px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.thread_view .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #DCCDBB;
}
 
.thread_view .titleBar #pageDescription a{
  color: #f7e5b6;
  font-weight: bold;
}
 
.thread_view .titleBar h1 {
  color: #f7e5b6;
  text-shadow: 0 0 0 transparent, 1px 1px 0 #4B3D2D !important;
}
 
 
/* THREAD VIEW TITLE BAR ENHANCEMENTS */

Hi Shelley,

I know you posted a fix for the flexile style. Can you please tell me what to fix in this blue version to make sure that gap doesn't appear?
 
Hi Shelley,

I know you posted a fix for the flexile style. Can you please tell me what to fix in this blue version to make sure that gap doesn't appear?

not sure what your referring to I can't see any gap.

Edit: I clicked the link in your sig assuming that is the site style your referring to?
 
Top Bottom