I've ran into a problem with css3
Posted February 21st 2013, 11:53am
http://www.elara-online.com
I've tried making a cloud-like forum background by:
.forabg {
background:transparent;border:1px solid #f2f9fe;border-radius:100px;border-top:none;height:250px;margin:100px auto 20px;position:relative;width:610px;
}
.forabg:after, .forabg:before {background:transparent;border:1px solid #f2f9fe;border-bottom:none;border-left:none;border-right:none;position:absolute;content:'';clear:both}
.forabg:after{border-radius:150px;height:100px;left:50px;margin-top:-50px;width:200px;}
.forabg:before{border-radius:200px;height:100px;right:50px;margin-top:-90px;width:280px;}


but as you can see, general chat and chatter box can't be clicked as links, it seems as if the width of forabg layers of the links?
how would I reverse that? It works in internet explorer perfectly, the links are clickable. But in firefox and chrome, it seems to cover the links.
Here's the forumlist_body:
<div class="forabg">
<!-- BEGIN forumrow -->
<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
<ul class="topiclist">
<center><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></center>
<li class="header">
<dl><dd style="padding-left:445px;">{L_TOPICS} <dd style="padding-left:10px;">{L_POSTS}<span style="padding-left:10px;"> {L_LAST_POST}</span></dd></dd>
</dl>
</li>
<!-- ENDIF -->
<ul class="topiclist forums">
<!-- IF not forumrow.S_IS_CAT -->
<li class="row">
<dl class="icon">
<dt>
<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
{forumrow.FORUM_DESC}
<!-- IF forumrow.MODERATORS -->
<br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
<!-- ENDIF -->
<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
</dt>
<!-- IF forumrow.CLICKS -->
<dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
<!-- ELSEIF not forumrow.S_IS_LINK -->
<dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
<dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
<dd class="lastpost"><span>
<!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->
<!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
<!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br /> <!-- ENDIF --></span>
</dd>
<!-- ENDIF -->
</dl>
</li>
<!-- ENDIF -->
<!-- IF forumrow.S_LAST_ROW -->
</ul>
</ul>
</div>
<!-- ENDIF -->
<!-- BEGINELSE -->
<div class="panel">
<strong>{L_NO_FORUMS}</strong>
</div>
<!-- END forumrow -->
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
I've ran into a problem with css3
Posted February 21st 2013, 4:30pm
I fixed it!
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
I've ran into a problem with css3
Posted February 21st 2013, 8:51pm
Great! So what did you do to fix it?

You still have a minor problem, though...the first block of forums overflows the "cloud" you created. I'm not sure you'll be able to fix that without losing compatibility with IE9 and under (creating a cloud outline and using it as a border image). But then again, if you limit the number of forums in a category, what you've done works well.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
I've ran into a problem with css3
Posted February 22nd 2013, 11:45am
how would I fix it? I'll gladly take your advice!
Yeah I decided to make a avatar - like simulator, with a very cute - like cloud background.
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
I've ran into a problem with css3
Posted February 23rd 2013, 7:34am
is it possible you could screen shot my board, dion?
Also, why doesn't my css take file system to parse, but my database?
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
I've ran into a problem with css3
Posted February 23rd 2013, 3:09pm
I don't understand...are you having problems posting a screen shot of your board?

The CSS goes into the database because it contains variables which must be parsed. That's the official line from the phpBB folks. The reality is a bit different. There is nothing stopping style.php from reading the CSS from the filesystem and then parsing the variables.

The best solution is to remove the background images from the CSS and replace them with actual images in the templates. By doing that, you can remove ALL the variables from the CSS, and the CSS can then reside in the filesystem. Turns out that most of these images are already defined in the templates, so it wouldn't take much time to make the changes. I know this because I made this change on my test board. ;)

Another option is to hardcode the height/width of the background images. That will also allow the CSS to reside in the filesystem, but any hardcoded background image will no longer be changeable in the ACP, so it's not as good of a solution.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
I've ran into a problem with css3
Posted February 23rd 2013, 4:40pm
Ah, thanks for explaining. Again, what would we do without you, dion?!
No, I just want a screen shot from your perspective, and what you mean about the block of forums over flowing?
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4

Who is online

Users browsing this forum: No registered users and 1 guest