Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1035518

Hi
Can u share the URL of site where the color is not wokring?
Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1035597

Hi there – So I re-tested today and it only works if I put this code below directly in the module css style, so I really could do with it working from the custom.css

Site is link & the screenshot is attached with the module highlighted, please note I will need to have the same colour throughout every ‘masthead’ on site but may need to change some individual mast-head modules colours for different pages.

.ja-masthead:before {background-color: #ffcebf;}

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1035600

Hi
Use page class to apply different background color in a different menu item.
For example
home is page class for home menu
now
use this code

.home .ja-masthead:before {background-color: #ffcebf;}

Do the same for another menu.

1 user says Thank You to Pankaj Sharma for this useful post

1. Ch1vpH

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1035954

Hi there,

So the only issue I have now, is that when on smaller screens the old/default ‘black’ colored mast-head appears & my newly customized one which is pink changes??

Please Advise

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1035956

Hi
Its from the custom class in your module.
See this : http://prntscr.com/fao0pb
either u can set the height to 0px or remove this class if you do not want to show this.

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1035981

Hi, same thing as my other thread I took that ‘media query’ out of the equation and all has been resolved.

One last question though in regard to this mast-head module & its text size being too big in a medium sized screen ie: anything above the 768px and below 922px the text is just to large for that sized screen.

I really need the text size to be the same as it would look in lower size screen than 768px

So can you quickly remind me how I would make this change so my text in between the two screen sizes of 768px and below 922px would be the same size as the lower view of 768px

Thank you

---

Attachments:

1. 

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1036100

Separate question to main one above but still in related to a bit of code you mentioned in one of the above posts….

I’m just trying to apply this custom pink colour to another mast-head module in a single article located in a Menu called about-us inside a Menu Item called our-story

Do you have any idea why its not playing ball in the custom.css

.about-us .our-story .ja-masthead .ja-masthead-detail {
  padding-top: 30px;
  padding-bottom: 30px;
  }

Module is on page: http://ch1vph.xyz/ri2k/index.php/our-story

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1036145

Hi
You have to add about us in the Menu item > page display > page class.
So that the class will appear for this page and code work.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. Ch1vpH

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1036335

Ok so one last question about mast-head module & an issue with the text size being too large in a medium sized screen ie: anything above the 768px and below 922px as the text is just to big for that sized screen.

I really need the text size to be the same as it would look in lower size screen than ie 768px

So can you quickly remind me how I would make this change so my text in between the two screen sizes of 768px and below 922px would be the same size as the lower view of 768px

image attached too!

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1036340

Hi
Use below code in custom.css file

@media (max-width: 992px) {
div.ja-masthead .ja-masthead-detail .ja-masthead-title {
    font-size: 24px;
}}

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. Ch1vpH

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1036342

Thanks! Homepage looks Perfect on all screens!!! 🙂

[Author]

Posts