Joomla Templates Club 406,261 posts

[pag1364 Friend pag1364Join date: January 2016Posts: 47Downloads:12Uploads:14 Thanks: 1]

#957043

Hello again,
I would like to insert a horizontal line with color under each title: ΠΡΟΦΙΛ, ΑΤΕΛΙΕ, e.t.c and remove the icon that has in some titles that looks like a trigon. I also give as an attachment the image that shows how the horizontal lines looks like. I would like if it is possible, to have two options: one option with the line under the title and one as shows in the image.
And finally, I need to ask if I can put the frame with the social info a few lines down in order to start from the same height that the text begin and not from title.

Thank again for your help.

---

Attachments:

1. 

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

#957767

Hi
You can add a line under the title using after class
For example Add below code in custom.css file

.title-style-2 .acm-title:after {
    height: 13px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    content: ""; 
    width:100%;

    background: url("http://ja-charity.demo.joomlart.com/templates/ja_charity/images/ico/divide-side.png") no-repeat center bottom;}

#acm-testimonials-96 .acm-title {width:100%;}
.title-style-2 .acm-title:before {border: none!important;}
.title-style-2 .acm-title:after {border: none;}

An example you can see in JA Charity template demo site .

Border none in above code is to remove the previous style of acm . This way you can customise the style . Use inspect element /firebug to check the default classes .

[pag1364 Friend pag1364Join date: January 2016Posts: 47Downloads:12Uploads:14 Thanks: 1]

#958537

thank you so much. it works just fine but I need a straight line and not with heart……how can we change it? and in the menu titles: simple luxury and private passion from my site http://origammi.bridgenet.gr/ is not in the entire page the line but only under the title and I want to be in the same width like in the title: ΑΤΕΛΙΕ

THANK YOU…

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

#958563

Hi
the image is just a sample , you need to create your own image and replace it the image path with your image path .
Use this code i custom.css file to display the title in full width

.title-style-2 .acm-title {
    padding: 24px 0;
    text-align: center;
    width: 100%;
}

[pag1364 Friend pag1364Join date: January 2016Posts: 47Downloads:12Uploads:14 Thanks: 1]

#958573

I did it and thank you but I have one problem now. When I tried to put my own image, did not work and when I put back your image, still nothing shows. here is my code:
.title-style-2 .acm-title:after { height: 13px; position: absolute; left: 0; right: 0; bottom: -7px; content: ""; width:100%; background: url("http://ja-charity.demo.joomlart.com/templates/ja_charity/images/ico/divide-side.png") no-repeat center bottom;} #acm-testimonials-96 .acm-title {width:100%;} .title-style-2 .acm-title:before {border: none!important;} .title-style-2 .acm-title:after {border: none;}
.title-style-2 .acm-title { padding: 24px 0; text-align: center; width: 100%; }

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

#958617

Hi
may i know your image path ?
Maybe it can be due to wrong image path

[pag1364 Friend pag1364Join date: January 2016Posts: 47Downloads:12Uploads:14 Thanks: 1]

#958635

http://origammi.bridgenet.gr/images/line-png-32.png

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

#958637

Hi
You can compare both images , your images has blank spaces that create too much height and the less width .
You can see the demo image is different : http://ja-charity.demo.joomlart.com/templates/ja_charity/images/ico/divide-side.png
width="1366" height="5" and only the line no empty space .

[Author]

Posts