Joomla Templates Club 406,261 posts

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#201849

Hi,

On each page of this template that I’m using (for templecitysdachurch.net), at the top, there is a blue box that shows the Title of the page. Photos attached.

I am wanting to change the blue into an image and remove the text/title of the page. No size changes. Same size of area but just an image and no text.

Is this possible? Or would you recommend a better way of going about doing something like this?

---

Attachments:

1. 
2. 

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

#551879

Hi it is JA Masshead module , that is showing page title , so if its published it will always shows the title of the page .
you can hide text for all pages
add this css code in your custom.css file

.t3-masthead .jamasshead-title {
display: none; }

You can change the background of it . from blue to an image .
add this css code into your custom.css file
css/custom.css

.t3-masthead {
background: #0b96f3 }

change the background as per your need , into a different color or add image .

Hope it helps

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#553395

Thanks! The code to hide the text worked but now the logo overlaps onto the rest of the page.. The image I’d like to have in place of the Masshead here would probably be enough to push the rest of the page down but this leads to….

….how would the code look if I want to add an image? I tried the code below and the image does not show.. :((

.t3-masthead {
background: url("../images/joomlart/slideshow/sl-1.jpg") no-repeat;

The page now looks like this:

---

Attachments:

1. 

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

#553414

Hello the issue is coming from the logo . your logo image has too big size ..
if you will reduce the size it can be adjusted .
Add this css code into your custom.css file .


.logo-image img {
max-height: 100px;
}

it will look like this >>> http://prntscr.com/4x3app

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#553418

Thanks! That worked. But the image is still not showing where I want it to… It has now turned into an empty light grey space the logo image overlaps..

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

#553419

Hi yes its logo style .
you can see it in demo also >>> http://prntscr.com/4x3s8w

You logo height is still 150px ,if you put it to 100px it it will give you more space .

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#553423

Yes, I like the logo size at 150px. 100 is a bit too small. The logo problem is solved.

But my initial problem is… where the blue bar you have in your link, I want to fill with a picture INSTEAD of the blue color fill. How do I do that?

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

#553424

Please check first 3 posts of this thread . its removed by you .

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#553425

Yes, but I think you are misunderstanding me. I wanted to remove the text (the title) so I can place an image to take place of the entire blue… Is this possible?

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

#553444

Hi
as i can see image is already added by you but image path is wrong .
this is the issue its not coming on front end .
add this css code in custom.css to replace the previous code

.t3-masthead {
background: url("http://templecitysdachurch.net/images/joomlart/slideshow/sl-1.jpg");
}

It will look like this >> http://prntscr.com/4x7x5y

[Author]

Posts