Styling the Contact Information

Con Foozed · Post by **Con Foozed** » Sun Dec 17, 2017 2:00 pm

On the page that shows when clicking 'Contact Us', above the form submit is a content box which can be edited from 'Contact Page Settings' within the ACP. But that box only permits BB code, which is painfully inadequate for the task. I want to style the content of that box with a bit of custom css, with a horizontally split section of text, two or maybe three columns, which is clearly beyond the scope of bbcode. I have no problem in creating the style, I'm just having problems working out how to embed it for this particular instance! Is there any way of permitting html/css within that field?

PlanetStyles.net · Post by **PlanetStyles.net** » Sun Dec 17, 2017 4:39 pm

Hello

The template file for this page is memberlist_email.html, and the code for that particular section is:

Code: Select all

<div class="panel">
		<div class="inner">
			<div class="postbody">
				<div class="content">
					{CONTACT_INFO}
				</div>
			</div>
		</div>
	</div>

{CONTACT_INFO} outputs whatever you enter into the ACP

Con Foozed · Post by **Con Foozed** » Sun Dec 17, 2017 7:06 pm

It's a little crude still, as I'll have to style the *whole* content of {CONTACT_INFO} as a single selector - in other words, no chance of my columns, etc., because any classes that I enter into the ACP panel will simply render as text

. That's why I was hoping to find a way of entering html directly into the ACP window. Many thanks though - a single selector is better than nothing!

PlanetStyles.net · Post by **PlanetStyles.net** » Sun Dec 17, 2017 7:33 pm

Would you be able to share a mockup of what you're trying to achieve?

Con Foozed · Post by **Con Foozed** » Sun Dec 17, 2017 9:04 pm

https://ibb.co/j43K76

is sort of what I'm after, although there would be text over each image too. I think bbcode might be a bit overwhelmed

eeji · Post by **eeji** » Sun Dec 17, 2017 9:05 pm

It may be a bit hacky, but you could define your own bbcodes to use the HTML/CSS required for your layout. Using this method would also survive any future updates without having to re-implement as theres no changes made to the core code.

Con Foozed · Post by **Con Foozed** » Sun Dec 17, 2017 9:14 pm

I didn't know writing your own bbcodes was even possible!

PlanetStyles.net · Post by **PlanetStyles.net** » Mon Dec 18, 2017 1:19 am

Eeji is correct!

The most elegant way to achieve this would be with a custom BBCode, defined in: ACP -> Posting -> BBcodes -> Add new BBCode

BBCode usage:

Code: Select all

[customContact][/customContact]

HTML Replacement:

Code: Select all

*your 3 x image code*

There's no need to use the content variables such as {TEXT} in your BBCode as the content is coming from the HTML replacement.

Then just insert the images into the contact page by inserting [customContact][/customContact] into the contact page message

Con Foozed · Post by **Con Foozed** » Mon Dec 18, 2017 11:00 am

I'm clearly doing something fundamentally wrong, because this isn't working

.
I've gone to ACP > POSTING > BBCodes > Add a new BBCode and entered
[customContact]{TEXT}[/customContact]
in BBCode usage, followed by
<div class="hello">{TEXT}</div>
in HTML replacement, submitted it, and entered
[customContact] frame [/customContact]
in the Contact Information field. When I open the page in a browser, it simply prints[customContact] frame [/customContact] in the area I'm looking to populate. I'm afraid I've never used a bbcode before, let alone created one, so I'm probably doing something embarrassingly silly

Stupid boy, scratch all that. Should know better by now that minor spelling error isn't minor after all! Okay, I think I may have a handle on it, I'll come back to you. Many thanks for advice thus far

Con Foozed · Post by **Con Foozed** » Mon Dec 18, 2017 6:16 pm

Works an absolute treat.Many thanks to you both