By Leslie Buck on Tuesday, 05 January 2016
Posted in Technical Issues
Likes 0
Views 491
Votes 0
I am in the process of working on a new site to replace my current site. I noticed that buttons I have added at the bottom of my blog posts are not acting responsively. They are cut off at the right side of the screen when in mobile or in a compressed browser.

1. How can I get them to fit the screen properly? See the screenshot. Also, you can see a button with that problem at the bottom of the post here

NOTE: the site is password protected. please see credentials below

2. How can I make the button color match the rest of my site? I am using the Simplistic Easyblog theme. I actually want to use buttons that are the same as on my home page. I tried using the same classes for my buttons on Easyblog, but Easyblog does not recognize the class I want called "button button-red" Do I need to modify the CSS in the Easyblog theme to make them match? If so, how?

3. There needs to be a space to separate the bookmark icon on the blog post page. See the screenshot below. How can I add this space to make it look better?

Thank you for any help!
Leslie
Hello Leslie,

The .button.button-red class it seems don't have a fade effect on hover state. Since you are using an aggressive method to style the button-red, you will need to do it for hover state too.

·
Friday, 08 January 2016 10:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Leslie,

1. How can I get them to fit the screen properly? See the screenshot. Also, you can see a button with that problem at the bottom of the post here
The text is too long inside a button and buttons with 2 lines are not a standard behaviour. To fixed this you will need to manually apply a hack on it.




2. How can I make the button color match the rest of my site? I am using the Simplistic Easyblog theme. I actually want to use buttons that are the same as on my home page. I tried using the same classes for my buttons on Easyblog, but Easyblog does not recognize the class I want called "button button-red" Do I need to modify the CSS in the Easyblog theme to make them match? If so, how?

You will need to use "button button-3 button-red" instead of just "button button-red".
http://screencast.com/t/jKRhSWMBPsc


3. There needs to be a space to separate the bookmark icon on the blog post page. See the screenshot below. How can I add this space to make it look better?

Sorry, I can't find out any attached screenshot in this post. Can you share it again?
·
Tuesday, 05 January 2016 11:13
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you very much for the reply, Chang.

1. Where do I put the CSS you provided? In what file?

2. I'm sorry, I was referring to the solid buttons on the home page. See the screenshot below. I like the current button shape, but the color I want is darker red. It is dark red that becomes a little lighter when you hover over the button. The colors are db0000 and #c10404. It looks like the bootstrap button colors cannot be changed, so I was using a custom button class called button-red. Unfortunately, it displays properly on my other joomla pages, but not on Easyblog.

I changed the class to button button-red in the same post mentioned above, but the red background of the button does not show at all. If you see the same post again, you will see that the text and link are at the bottom of the screen (in white), but there is no visible button. You can see this in a screenshot here too.

3. Oops! Please see the other screenshot of the bookmark link. Sorry I forgot that.

thank you!
Leslie
·
Tuesday, 05 January 2016 13:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Not sure if that bookmark link screenshot went through. If not, here it is.

https://www.dropbox.com/s/v4esew2064pm0ma/bookmark-space.jpg?dl=0
·
Tuesday, 05 January 2016 23:37
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Leslie,

1. Where do I put the CSS you provided? In what file?

Put into your template custom css. I have tried to log in ftp to check for you but don't have any folders inside there.
http://screencast.com/t/4cS6KvPqhzc


2. I'm sorry, I was referring to the solid buttons on the home page. See the screenshot below. I like the current button shape, but the color I want is darker red. It is dark red that becomes a little lighter when you hover over the button. The colors are db0000 and #c10404. It looks like the bootstrap button colors cannot be changed, so I was using a custom button class called button-red. Unfortunately, it displays properly on my other joomla pages, but not on Easyblog.

I changed the class to button button-red in the same post mentioned above, but the red background of the button does not show at all. If you see the same post again, you will see that the text and link are at the bottom of the screen (in white), but there is no visible button. You can see this in a screenshot here too
.
The screenshots are missing too. You will need to use an aggressive method to style the buttons.
Insert css codes below into your template custom stylesheets.

http://screencast.com/t/xCg8gj1p5

3. Oops! Please see the other screenshot of the bookmark link. Sorry I forgot that.
You will need to insert css codes below into your template custom stylesheets.
·
Wednesday, 06 January 2016 10:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you again for the help. I will try this out.

Yes, the ftp path setup is actually sitepath:
/var/www/development/tacticalarts

Someone set this test site up for me. I was confused about the lack of folders as well.

thank you,
Leslie

p.s.
I was attaching screenshots that are .tiff files. I think they were not accepted when I submitted the form for my replies.
·
Wednesday, 06 January 2016 12:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for updating Leslie, please remember to set your domain for your license at http://stackideas.com/dashboard

We have been abused by users who are obtaining support for multiple domains even if they purchased a Community version lately and we are enforcing this new policy commencing today. If you do not set a domain for your license, you will not be able to obtain for support.

Thanks for understanding.
·
Wednesday, 06 January 2016 12:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,
This is a test site that will be moved to my registered site http://www.tacticalarts.com when the updates are ready. This will simply replace the old site at the same domain.
thank you,
Leslie
·
Wednesday, 06 January 2016 12:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Leslie,

You are most welcome.
·
Thursday, 07 January 2016 16:25
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you very much for that. Those fixes all worked.

The only remaining issue is to get the button to fade on hover. How can I get the button in easyblog to change when you hover like my other buttons?

Just guessing, I tried to add the !important; code to the hover section below, but it caused a parse error.

.button.button-red {
background: #db0000;
}
.button.button-red:hover, .button.button-red:active, .button.button-red:focus {
background: #c10404;
}
·
Friday, 08 January 2016 02:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Oh! Actually the code you gave made it where none of the buttons on any of my pages change on hover now.
·
Friday, 08 January 2016 03:51
·
0 Likes
·
0 Votes
·
0 Comments
·
Great! Thank you again Chang!

I tried cutting and pasting, but was missing something.

Anyway, it all looks much better now.
·
Friday, 08 January 2016 13:27
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for updating, glad that your issues are resolved now
·
Friday, 08 January 2016 13:27
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post