Can I add text icons on home page (in post info) and post pages? Triton Lite

• 

  embestocolmo · Member · Nov 24, 2014 at 10:29 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’d like to add text icons to my posts, and I’d like them to show up on the main page and on each individual post page. Is this possible with CSS? I’m using the Triton Lite theme.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 24, 2014 at 8:19 pm

  • Copy link

  Can you explain a little more what you are wanting the text icons to do and where you are wanting to place them? You can certainly insert images (icons and otherwise) into posts and pages.

• 

  embestocolmo · Member · Nov 25, 2014 at 8:53 am

  • Copy link

  hello,

  yes, I would like to insert an icon of a calendar, and if it’s posible, a specific date within the calendar icon, next to posts that are about an event. So I would like this icon to appear on the main page (next to the summary of each post, perhaps in the title area), as well as in the post page once you open up the post.

  Thanks

• 

  thesacredpath · Member · Nov 25, 2014 at 2:56 pm

  • Copy link

  Hi there, to put the image next to the title would require you to write individual CSS rules for each and every post that you needed to add the icon to by targeting them by their individual unique CSS ID. The following is a sample of the code for your post titled 2014.11.28 Moderna Museet Guided Tour in Spanish.

  #post-534 .postitle {
      background: url("URL_OF_IMAGE") no-repeat scroll left top;
      padding-left: 57px;
  }

  You would replace URL_OF_IMAGE between the quote marks with the URL of your uploaded icon and then the padding-left value would be the width of your icon image. Something around 50-60px square looks like it would work well.

  post-534 is the unique post CSS ID for that post. You can find that by using the web inspector in your browser or viewing the source code and finding that post in the HTML. In the opening “article” HTML tag will be the post ID. It looks like this:
  <div id="post-534" class="...
  IDs are always preceded in the CSS by a hash mark ( # ) as you see in my CSS example above.

• 

  thesacredpath · Member · Nov 25, 2014 at 2:58 pm

  • Copy link

  Here is a screenshot of the above with a sample icon image:
  

• 

  embestocolmo · Member · Nov 26, 2014 at 8:27 am

  • Copy link

  thank you! you’ve been very helpful! I’ll try it out now!

• 

  embestocolmo · Member · Nov 26, 2014 at 9:21 am

  • Copy link

  it works! :)

• 

  thesacredpath · Member · Nov 26, 2014 at 6:28 pm

  • Copy link

  Hooray! And you are welcome.

• 

  embestocolmo · Member · Dec 2, 2014 at 9:19 am

  • Copy link

  hello,

  Sorry to bother you again, but now I’m trying to do it again, and when I click on “save” after I write the CSS code, nothing happens, and when I open up the CSS editor again, the code isn’t there anymore. Do you know why this could happen?

  Thanks

• 

  thesacredpath · Member · Dec 2, 2014 at 4:14 pm

  • Copy link

  @embestocolmo, this issue has been fixed. Can you again try saving some CSS and let us know if you have any problems?

• 

  embestocolmo · Member · Dec 3, 2014 at 9:53 am

  • Copy link

  Solved! :)

• 

  thesacredpath · Member · Dec 3, 2014 at 8:37 pm

  • Copy link

  Hooray!

• 

  embestocolmo · Member · Dec 5, 2014 at 10:17 am

  • Copy link

  it works fine in the main page, but when I open a post (individually), the calendar is chopped off at the middle. Do you know if this can be fixed?

• 

  thesacredpath · Member · Dec 5, 2014 at 8:24 pm

  • Copy link

  Let’s add a little padding to the single post page entry titles with the following.

  .single .postitle {
      padding-bottom: 35px;
  }

• 

  embestocolmo · Member · Dec 8, 2014 at 9:35 am

  • Copy link

  perfect, as always :)

• 

  thesacredpath · Member · Dec 8, 2014 at 9:00 pm

  • Copy link

  Hooray!