phpBB • Free and Open Source Forum Software

DV1 · by **DV1** » Thu Jul 26, 2018 5:41 pm

Danceban

In the styles forum I asked a question about specific 'a' links. As you know it's a way of getting a different 'a' link styling for specific elements in the phpBB html template where someone wants it.

Example:

Code: Select all

a.class1 {color:#000;}
a.class1:link  {text-decoration: none; color:#000;}
a.class1:visited {text-decoration: none; color:#000;}
a.class1:hover {text-decoration: underline; color: blue;}
a.class1:active {text-decoration: none; color:#000;}

When you change a link with this method then its html looks like this:

<a href="http://www.google.com" class="class1">Google</a>

The following image shows where I want to modify the particular link in your template:

As indicated, if I can change the second title's color and hover color then I can change the background. If I change the background and don't change the title's color/hover then it's going to be nearly invisble.

I tried looking on the viewtopic template as to where this second title would be. I think I found the section:

Code: Select all

<!-- BEGIN postrow -->
	<!-- EVENT viewtopic_body_postrow_post_before -->
	<!-- IF postrow.S_FIRST_UNREAD -->
		<a id="unread" class="anchor"<!-- IF S_UNREAD_VIEW --> data-url="{postrow.U_MINI_POST}"<!-- ENDIF -->></a>
	<!-- ENDIF -->
	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">

Again, I think this may be it, I'm not sure. If it is the section, then it's:

<a id="unread" class="anchor" data-url="{postrow.U_MINI_POST}"></a>

You can see right away where using the specific linking would be a problem since the link already has a "class".

Anyway, I think that's the link to change but since you know your own style maybe it's somewhere else altogether. But I think you get the picture for what I'm trying to do.

Thanks

Daniel

DV1 · by **DV1** » Thu Jul 26, 2018 10:24 pm

Danceban

I found it and all it took was a css change in content.css:

Code: Select all

.postbody h3.first {
	/* The first post on the page uses this */
	font-size: 1.5em;
}

Then I added this below it:

Code: Select all

.postbody h3.first a {
color: #000000;
}

From there I can adjust hover color, etc.

danceban · by **danceban** » Thu Jul 26, 2018 10:39 pm

Hey Daniel,

yes, you can change it via css within .postbody h3.first, but take in consideration that this changes will apply everywhere .postbody h3.first is used. I don't know if that may be what you want to achieve. If you want to change only this topic title on this specific place (topic view), then I guess you can add your own css class in the template file and apply what is needed only for this topic title link. For any HTML tag, you can apply multiple CSS classes, only separate them with spaces. It is recomended to use not more than 4-5 different classes for the same tag.
So you can add let's say .myTopicTitle css class to viewtopic_body.html template:

Code: Select all

<!-- EVENT viewtopic_body_post_subject_before -->
			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first myTopicTitle"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="{postrow.POST_ICON_IMG_ALT}" title="{postrow.POST_ICON_IMG_ALT}" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>

After that, add to one of the css files this class and add everything you want (color, font style, hover/active etc) and it will apply only in this specific place.

Have not tested it, but it should work. Both methods are okay, you choose what you need

DV1 · by **DV1** » Fri Jul 27, 2018 4:09 am

I checked main pages, CP, Moderator, and various others but did not see anything with the color change of the title.

If at some point I see something I will let you know, but so far so good.

Daniel

pycode

Specific link change in pycode - pycode

advertisements