How to have Comment, Tags & Categories displayed UNDERLINED before hovering?
I'm using Atahualpa 3.4.4.
I want the Comment, list of Tags and Categories after my post underlined when displayed on page. Right now, the underline displays only when hovered. This is what I have currently: Under Post & Pages --> Edit Post/Page Info items -->FOOTER: Homepage %comments('We appreciate your sharing a comment here.', 'Comment (1)', 'Comments (%)', 'Comments are closed')% | %tags-linked('Tags: ', ', ', ' | ')%Category: %categories-linked(', ')%%edit(' | ', 'Edit this post', '')% Thanks for your help. You all have been wonderful! FunBloggin ( non-techy, eager to be a sponge & learn & share ) p.s. My apologies if this question has been asked & answered by someone else on the Forum. I had done an intensive search on my request. |
Well since you are eager to learn, I'm going to make you work a little and maybe this can turn into a case study of 'How do I get xxxx feature to work'
First a little background. The various effects when you put the cursor over an object are caused by CSS. You have to find out where this is all takng place so the first thing you have to do is (gasp) go look at the code (NOOOOOO not that). Oh hush up inner voice, it's not that hard, just new! When I say you have to look at the code, I don't mean the php that builds the pages (that's another adventure altogether) but the HTML that is built and causes your page to display. Oh to make things easier here is a hint, first go to ATO->Configure CSS & JS->CSS: Compress? and set it to 'NO'. So go to your browser and view one of your pages, then look at the SOURCE of the page. Check under the EDIT menu of the browser, and copy the page into a text document to use as reference. Once you have that done, post back here and I'll take you to step 2 - locating the area you want to play with. |
This is FUN!
Fun is good, right? ;) Re: your instructions: "So go to your browser and view one of your pages, then look at the SOURCE of the page. Check under the EDIT menu of the browser, and copy the page into a text document to use as reference." I did this: I viewed my Home Page. On browser, I found "SOURCE" under VIEW menu--> Page Source I copied/pasted the Source (html) info into a Wordpad doc. Posting back to play Step 2. THANKS MUCH for being my Guide. FunBloggin |
Step two. Now we have to find the area of code that is displaying the footer. In this case you can find easy because of the unique phrase 'We appreciate', so do a search for that phrase and you'll find it is in a '<div...' that looks like this
HTML Code:
<div class="post-footer"><a href="http://192.168.48.99/wordpress/?p=421#respond" class="comments-link" title="Comment on galleria test">We appreciate your sharing a comment here.</a> | Category: <a href="http://192.168.48.99/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> | <a class="post-edit-link" href="http://192.168.48.99/wordpress/wp-admin/post.php?action=edit&post=421" title="Edit post">Edit this post</a></div> If you look at the part of the code that contains the 'We Appreciate' we find HTML Code:
<a href="http://192.168.48.99/wordpress/?p=421#respond" class="comments-link" title="Comment on galleria test">We appreciate your sharing a comment here.</a> In addition, the <a>...</a> is inside a <div>...</div> that has a class of 'post-footer'. CSS uses CLASS and ID to identify different elements in the HTML. So Now it is homework time again. If you look in the code near the begining you will find: '<style type="text/css">' If you set 'CSS: Compress?' to NO, it will be followed by: /* ------------------------------------------------------------------ ---------- BASE LAYOUT ---------------------------------------------- ------------------------------------------------------------------ */ This is the start of the CSS for this page. It goes till you find a </style> (a long ways down) You job is to find all the CSS that has 'comments-link' or 'post-footer' and paste it in your reply including the lines enclosed between the {...} like div#menu2 { border: dashed 1px #ccc; } and we will examine what you find. |
Where did you go?? Don't tell me the homework was too hard or the dog ate it.
|
All times are GMT -6. The time now is 02:04 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.