- This topic is empty.
-
AuthorPosts
-
April 2, 2016 at 2:36 pm #240146barley981Participant
Hey guys. I’m trying to create a thread prefix image for my forum which is Xenforo. What I want to achieve is something like below:
http://i.imgur.com/ZgUlUmi.jpgSo far, after doing some research in Google, here’s what I ended up with:
http://i.imgur.com/mk3SCDS.jpgWith the following code:
.prefix {
padding: 2px 8px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
text-decoration: none;
height: 15px;
width: 60px;
line-height: 16px;
}.prefix.prefixBlast {
background: black;
color: white;
}The problem is, the font is skewed along with the background. I just want to be able to isolate the font from the background so I can design it some more.
Since after editing the CSS, I might have to edit the template of the prefixes, I believe this is the line that is responsible for this CSS:
= {$xenOptions.pfl_minToShow}’, {xen:phrase pfl_show_only_the_x_prefix_y, ‘total={$prefix.totalThreads}’, ‘prefix={xen:helper threadPrefix, $prefix, escaped, ”}’}, {xen:phrase pfl_show_only_prefix_x,’prefix={xen:helper threadPrefix, $prefix, escaped, ”}’}}}”>{xen:helper threadPrefix, $prefix, html, ”}
<xen:if is=”{$xenOptions.pfl_showTotalThreads} == ‘rightside'”>
{xen:if ‘{$prefix.totalThreads} >= {$xenOptions.pfl_minToShow}’, ‘({$prefix.totalThreads})‘}
</xen:if>
April 2, 2016 at 3:01 pm #240148Paulie_DMemberThere’s a couple of ways to do that.
The first requires that the element have a child which will hold the text.
Once the parent is skewed, the child is skewed back the same amount:
http://codepen.io/Paulie-D/pen/eZGLGW
The second uses the triangle border technique on a couple of pseudo-elements…it’s up to you which you choose.
April 2, 2016 at 3:12 pm #240149barley981ParticipantWhat does this do? *, ::before, ::after {
box-sizing: border-box;
}April 2, 2016 at 3:18 pm #240152barley981ParticipantJust an update, after applying the code, it does show up as skewed but I still can’t separate them because when they’re showing up, they show up as 1 class. I believe with this template:
= {$xenOptions.pfl_minToShow}’, {xen:phrase pfl_show_only_the_x_prefix_y, ‘total={$prefix.totalThreads}’, ‘prefix={xen:helper threadPrefix, $prefix, escaped, ”}’}, {xen:phrase pfl_show_only_prefix_x,’prefix={xen:helper threadPrefix, $prefix, escaped, ”}’}}}”>{xen:helper threadPrefix, $prefix, html, ”}When I inspect element, this is what I see:
http://i.imgur.com/RWmy93P.jpgAny suggestions on how I can separate .prefix and then the prefix ID?
April 3, 2016 at 1:19 am #240162Paulie_DMemberThis
*, ::before, ::after { box-sizing: border-box; }
Means that dimensions of elements include padding & borders rather than those adding to height/width.
As for the code you provided…I have no idea what that is…it’s not HTML.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.