Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Article Image Query

Featured Lock Resolved Issue
Hello,

Hopefully you will be able to help me.

I am experiencing some technical issues when trying to amend the article previews at the following link;

http://www.fusiontalent.co.uk/index.php/roster

For example, when I hover over one of the artists names, the image then appears. I would like the image to be constantly visible, with the artists name above the image and the 'read me' button central.

Is this possible and can someone help with this?

Thanks in advance.

18 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for your query. Please add this css code inside the custom.css file.


.view-category .blog .items-row .item .entry-image {
margin-bottom: 0;
position: relative;
opacity: initial;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}
.view-category .blog .entry-header h2 {
font-size: 28px;
font-weight: 500;
letter-spacing: -2px;
color: #fff;
}
.readmore {
text-align: center;
margin-top: 10px;
}


-Thanks

Michael Bromley

More than a month ago #Permalink
Hello,

I have tried this but unfortunately it doesn't work. Any other suggestions?

Many thanks

Toufiq - Staff

More than a month ago #Permalink
Hi there,

I have checked and it works fine.

http://prntscr.com/oigb4f

-Thanks

Michael Bromley

More than a month ago #Permalink
Hello,

How strange. I have tried this and unfortunately it is still not showing my end?

I have attached a screenshot.

Attachments (1)

  • Screen Shot 2019-07-22 at 15.25.16.png
    Screen Shot 2019-07-22 at 15.25.16.png 343.6 KB

Michael Bromley

More than a month ago #Permalink
I have now managed to create it like this, however the layout is not correct and I am unable to view the title.

http://fusiontalent.co.uk/index.php/roster

Toufiq - Staff

4 weeks ago #Permalink
Hi there,

Thanks for your reply. Please add this CSS code inside the custom.css file.


.revibe-article .sppb-addon-article .sppb-article-img {
position: relative;
opacity: initial;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 a {
font-size: 28px;
font-weight: 500;
color: #fff;
text-transform: capitalize;
}


-Thanks
Hello Toufiq,

This works however ideally I would like the image to be full colour with the title underneath... do you have code for this? I have attached a screenshot of how it is currently displaying.

Many thanks.

Attachments (1)

  • Screen Shot 2019-07-23 at 16.31.29 copy.jpg
    Screen Shot 2019-07-23 at 16.31.29 copy.jpg 227.8 KB

Toufiq - Staff

4 weeks ago #Permalink
Hello Toufiq,

This works however ideally I would like the image to be full colour with the title underneath... do you have code for this? I have attached a screenshot of how it is currently displaying.

Many thanks.


Hi there, Do you wanna like this?

http://prntscr.com/oj8g1k

-Thanks
Hello,

Thanks for the response.

Yes, I would like for the image to be full colour similar to your screenshot however I would like for the title to be underneath the image and not across the image. Does this make sense?

Many thanks.

Toufiq - Staff

4 weeks ago #Permalink
Hello,

Thanks for the response.

Yes, I would like for the image to be full colour similar to your screenshot however I would like for the title to be underneath the image and not across the image. Does this make sense?

Many thanks.


Hi there, Please share a screenshot that you want to do exactly. Thanks
Hello,

Please see screenshot attached. The article on the left is how it is currently (Georgia Burgess). However the 2 articles on the right (Charlie Healy & Stooshe) is the format I want to achieve.

Thanks.

Screen Shot 2019-07-25 at 15.41.50.jpg

Attachments (1)

  • Screen Shot 2019-07-25 at 15.41.50.jpg
    Screen Shot 2019-07-25 at 15.41.50.jpg 444.1 KB

Toufiq - Staff

3 weeks ago #Permalink
Hi there,

Thank you so much for your feedback. Please create a custom.css file inside the css folder & put this css code inside the custom.css file.

templates/your_template/css/custom.css


.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 {
margin: 0px;
width: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 a {
font-size: 22px;
font-weight: 400;
color: #000;
text-transform: capitalize;
}
.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-img img {
width: 100%;
border-top: 4px solid #ed145b;
}
.revibe-article .sppb-addon-article {
position: relative;
-webkit-box-shadow: initial;
box-shadow: initial;
border-top: 0;
text-align: center;
overflow: hidden;
}
.revibe-article .sppb-addon-article .sppb-article-img:after {
position: absolute;
content: "";
background-color: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info:before {
position: absolute;
content: "";
width: 100%;
height: 0px;
top: 0;
left: 0;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}


-Thanks
Hello,

This works for the image but unfortunately the title is not present. https://fusiontalent.co.uk/index.php/en/roster

Please can you advise.

Many thanks.

Toufiq - Staff

3 weeks ago #Permalink
Hi there,

Add this CSS code inside custom.css file.


.revibe-article .sppb-addon-article .sppb-article-info h3 a {
font-size: 28px;
font-weight: 500;
color: #000;
text-transform: capitalize;
}


-Thanks
Hello,

Unfortunately that still doesn't work. My Custom CSS currently reads as follows;

.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 {
margin: 0px;
width: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-img img {
width: 100%;
border-top: 4px solid #ed145b;
}
.revibe-article .sppb-addon-article {
position: relative;
-webkit-box-shadow: initial;
box-shadow: initial;
border-top: 0;
text-align: center;
overflow: hidden;
}
.revibe-article .sppb-addon-article .sppb-article-img:after {
position: absolute;
content: "";
background-color: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info:before {
position: absolute;
content: "";
width: 100%;
height: 0px;
top: 0;
left: 0;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 a {
font-size: 28px;
font-weight: 500;
color: #000000;
text-transform: capitalize;
}

Please advise.

Toufiq - Staff

3 weeks ago #Permalink
Hello,

Unfortunately that still doesn't work. My Custom CSS currently reads as follows;

.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 {
margin: 0px;
width: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info {
position: relative;
padding: 10px;
top: 0;
width: 100%;
height: 100%;
padding-top: 0px;
}
.revibe-article .sppb-addon-article .sppb-article-img img {
width: 100%;
border-top: 4px solid #ed145b;
}
.revibe-article .sppb-addon-article {
position: relative;
-webkit-box-shadow: initial;
box-shadow: initial;
border-top: 0;
text-align: center;
overflow: hidden;
}
.revibe-article .sppb-addon-article .sppb-article-img:after {
position: absolute;
content: "";
background-color: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.revibe-article .sppb-addon-article .sppb-article-info:before {
position: absolute;
content: "";
width: 100%;
height: 0px;
top: 0;
left: 0;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}
.revibe-article .sppb-addon-article .sppb-article-info h3 a {
font-size: 28px;
font-weight: 500;
color: #000000;
text-transform: capitalize;
}

Please advise.


Hi there, Please send me the Joomla administrator access via PM. Thanks

Toufiq - Staff

3 weeks ago #Permalink
Hi there, Thanks for your reply. Please check now. Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Sifat

Sifat

Total Accepted Answers: 87
Toufiq

Toufiq

Total Accepted Answers: 52
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

293026

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us