Change CSS for a particular page

Started by Vyazhan, June 23, 2017, 06:32:08 AM

Previous topic - Next topic

Vyazhan

Hi guys,

I am wondering if it's possible in SMF (similar to wordpress for instance) to change the style of a particular page instead of the whole forum. I would need to make some modifications to the PM reply section of the forum but if I change any css there, it will change it for the entire editor sections across the board.

If anyone has an idea, I am very much looking forward to seeing it :)

Thanks a lot!

Arantor

It kind of depends what changes you actually want to make as to whether they can be done really easily or not.

What, specifically, do you want to change?

Vyazhan

Quote from: Arantor on June 23, 2017, 08:45:33 AM
It kind of depends what changes you actually want to make as to whether they can be done really easily or not.

What, specifically, do you want to change?

Hi there :)

Just to make one example in this case, I would like to remove a span class "upperframe" on the PM reply section of the forum while preserving the same span class "upperframe" on the normal forum reply section of a post.

They both draw the class from the same line of code as far as can see. Is there an easy way to target just one part of the generated code or would I need to either write completely unique code for each section (how would I even do that with limited PHP skills) or would I just remove the upperframe class alltogether and then try to kind of re-generate the missing class through other selectors?

Thanks a lot and I hope this makes it more clear!

All the best,
V

Illori

why cant you tell us the exact part you want to change instead of an example? there may be different ways to do what you want depending on EXACTLY what you want changed.

Arantor

There are multiple ways to target it, but I need specifics not generalities.

Gwenwyfar

As long as what you need to edit is inside this, much of PM's content is inside the #personal_messages div (including the post area). Other pages may have similar IDs. This is assuming you'll only be editing the css for your style changes, if you need to edit the html that'll be something else...
"It is impossible to communicate with one that does not wish to communicate"

Arantor

This is why I wanted specifics, to be able to point out if it could be done solely in CSS (likely) or not...

Vyazhan

Hi guys,

sorry about the confusion, I guess I wasn't specific enough :)

So here is the exact code to see if a change is possible (keep in mind that mods are installed and a custom theme is used):

On the reply section of the PM section of the forum I would want the following piece of code removed (or even better, just simply hidden):

<span class="upperframe"><span></span></span>

From this entire code:

snip upper part
<div class="cat_bar">
<h3 class="catbg">
<span class="ie6_header floatleft"><img src="http://thewebsite/Themes/just-theme/images/icons/im_newmsg.gif" alt="New Conversation" title="New Conversation" />&nbsp;Reply</span>
</h3>
</div>
<form action="http://thewebsite/index.php?action=pm;sa=send2;c=11" method="post" accept-charset="UTF-8" name="postmodify" id="postmodify" class="flow_hidden" onsubmit="submitonce(this);smc_saveEntities('postmodify', ['subject', 'message']);" enctype="multipart/form-data">
<div>
<span class="upperframe"><span></span></span>
<div class="roundframe"><br class="clear" />
<div id="smileyBox_message"></div>

<div>
<div style="width: 98.8%;">
<div>
<textarea class="editor" name="message" id="message" rows="12" cols="600" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" tabindex="1" style="height: 175px; "></textarea>
</div>

</div>
</div>

snip lower part

As said, if I just remove this line from the php, it will remove the upperframe from every single part of the forum, and I want it removed specifically just for this section of the forum (The reply section when answering a PM).

Thanks for the help so far and sorry for the inconvenience caused :)

Gwenwyfar

In your css file, you can add this:


#personal_messages #postmodify .upperframe {
display: none; }


Note: The #postmodify selector is included because otherwise it will also hide the upperframe on PM search.

(If you're not sure where to add it, add at the end of the file)
"It is impossible to communicate with one that does not wish to communicate"

Vyazhan

Quote from: Gwenwyfar on June 24, 2017, 08:38:59 AM
In your css file, you can add this:


snip


D'oh! I didn't know you can target just the pm section, well designed code! :) Thanks a lot for the help, it works like a charm!

Gwenwyfar

It's all simple IDs and classes, have a look about CSS selectors next time you struggle with a change like this, they're very useful ;)
"It is impossible to communicate with one that does not wish to communicate"

Advertisement: