I'm porting over my main website design so my forum matching the homepage. Not even five minutes in, I run into a problem. I need to start overriding the default xenforo base CSS.
What I've done right now is create a main template file called core.css In that template I'm including my other css files starting with the header, core_header.css to override the default header styles. When I include the template into xenforo by typing:
inside of PAGE_CONTAINER.
Here's the <head> of PAGE_CONTAINER:
The require is the last thing before the closing head tag. Now when I view the style, my changes are overwritten. This is because the core.css template is included first.
*Notice core is the first file included. This is because it is sorted alphabetically. Now I'm doing the opposite, xenforo is overwriting my changes instead of my changes overwriting it. I'm very very new to styling xenforo, I've only got this setup because I viewed a tutorial.
I do not want to use !important to override the css classes. I want my template to be included last so it overwrites all styles. If I rename it to zcore.css then it is included last and my styles override.
I'm working locally.
What I've done right now is create a main template file called core.css In that template I'm including my other css files starting with the header, core_header.css to override the default header styles. When I include the template into xenforo by typing:
Code:
<xen:include css="core.css" />inside of PAGE_CONTAINER.
Here's the <head> of PAGE_CONTAINER:
<head>
<xen:hook name="page_container_head">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<xen:if is="{$isResponsive}">
<meta name="viewport" content="width=device-width, initial-scale=1">
</xen:if>
<xen:if is="{$requestPaths.fullBasePath}">
<base href="{$requestPaths.fullBasePath}" />
<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
if (_b && _b.href != _bH) _b.href = _bH;
</script>
</xen:if>
<title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>
<noscript><style>.JsOnly, .jsOnly { display: none !important; }</style></noscript>
<link rel="stylesheet" href="css.php?css=xenforo,form,public&style={xen:urlencode $_styleId}&dir={$visitorLanguage.text_direction}&d={$visitorStyle.last_modified_date}" />
<!--XenForo_Require:CSS-->
{xen:helper ignoredCss, {$visitor.ignoredUsers}}
<xen:include template="google_analytics" />
<xen:include template="page_container_js_head" />
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
<link rel="alternate" type="application/rss+xml" title="{xen
hrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
<xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
<xen:require css="core.css" />
</xen:hook>
</head>
<xen:hook name="page_container_head">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<xen:if is="{$isResponsive}">
<meta name="viewport" content="width=device-width, initial-scale=1">
</xen:if>
<xen:if is="{$requestPaths.fullBasePath}">
<base href="{$requestPaths.fullBasePath}" />
<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
if (_b && _b.href != _bH) _b.href = _bH;
</script>
</xen:if>
<title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>
<noscript><style>.JsOnly, .jsOnly { display: none !important; }</style></noscript>
<link rel="stylesheet" href="css.php?css=xenforo,form,public&style={xen:urlencode $_styleId}&dir={$visitorLanguage.text_direction}&d={$visitorStyle.last_modified_date}" />
<!--XenForo_Require:CSS-->
{xen:helper ignoredCss, {$visitor.ignoredUsers}}
<xen:include template="google_analytics" />
<xen:include template="page_container_js_head" />
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
<link rel="alternate" type="application/rss+xml" title="{xen
hrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" /><xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
<xen:require css="core.css" />
</xen:hook>
</head>
The require is the last thing before the closing head tag. Now when I view the style, my changes are overwritten. This is because the core.css template is included first.
Code:
<link rel="stylesheet" href="css.php?css=core,moderator_bar,node_category,node_forum,node_list,sidebar_share_page&style=2&dir=LTR&d=1408574827" />*Notice core is the first file included. This is because it is sorted alphabetically. Now I'm doing the opposite, xenforo is overwriting my changes instead of my changes overwriting it. I'm very very new to styling xenforo, I've only got this setup because I viewed a tutorial.
I do not want to use !important to override the css classes. I want my template to be included last so it overwrites all styles. If I rename it to zcore.css then it is included last and my styles override.
I'm working locally.
Last edited: