News: When asking for support, it helps us and you, if you read the Posting Guidelines

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

June 18, 2019, 02:38:08 AM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188435
  • Total Topics: 20727
  • Online Today: 25
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 22
Total: 22

Author Topic: Front page - Read More - styling  (Read 360 times)

0 Members and 1 Guest are viewing this topic.

Offline jernatety

  • Sr. Member
  • ****
  • Posts: 254
Front page - Read More - styling
« on: March 21, 2019, 07:34:43 AM »
I notice on various sites many have styling where the read more text in the article looks more like a button with either a rectangle behind it or a capsule. Can I add CSS to do that without breaking tiny portal?

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Front page - Read More - styling
« Reply #1 on: March 21, 2019, 07:58:22 AM »
Quite sure that our Read more link is just text, with no attributes (like class) to target with css.

Can’t be sure without a computer but can check later. It should be relatively simple to add one or more attributes though...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline jernatety

  • Sr. Member
  • ****
  • Posts: 254
Re: Front page - Read More - styling
« Reply #2 on: March 21, 2019, 08:24:18 AM »
Quite sure that our Read more link is just text, with no attributes (like class) to target with css.

Can’t be sure without a computer but can check later. It should be relatively simple to add one or more attributes though...

Ok, thank you for the response. I'm trying to make my site look more like a professional level organization similar to other sites formatting.

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Front page - Read More - styling
« Reply #3 on: March 21, 2019, 10:41:55 AM »
Just be careful: more graphics is not perse professional. Sometimes ‘ less is more’
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline @rjen

  • Support Team
  • *
  • Posts: 1672
    • FJR-club Nederland
Re: Front page - Read More - styling
« Reply #4 on: March 21, 2019, 11:59:44 AM »
Checked: it is easily possible. The read links do have a class: tp_readmore.

So adding a bit of css to your site is all you need...

Example:

.tp_readmore a
{
   background-color: #21759B;
   color: #fff;
   padding: 10px;
   text-decoration: none;
   border-radius: 6px;
   border: 1px solid #0f3647;
}

.tp_readmore a:hover {
  background-color: #ce0606;
}

results in attached...

Play around with colors, widths etc till you like it...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline jernatety

  • Sr. Member
  • ****
  • Posts: 254
Re: Front page - Read More - styling
« Reply #5 on: March 21, 2019, 01:31:01 PM »
Sweet! Thank you very much. Looks great.