ThemeShaper Forums Tag: csshttp://forums.themeshaper.com/
Help In Shaping WordPress ThemesenTue, 03 Mar 2015 22:36:04 +0000Flying_D on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27420
Mon, 25 Jun 2012 11:26:18 +0000Flying_D27420@http://forums.themeshaper.com/<blockquote><p> @marcel - please note that the thematic has moved to <a href="http://www.thematictheme.com" rel="nofollow">www.thematictheme.com</a> </p></blockquote>
<p>Thanks, I've already registered - see you over there!
</p>helgatheviking on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27408
Wed, 20 Jun 2012 17:10:55 +0000helgatheviking27408@http://forums.themeshaper.com/<p>@marcel - please note that the thematic has moved to <a href="http://www.thematictheme.com" rel="nofollow">www.thematictheme.com</a>
</p>Flying_D on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27407
Wed, 20 Jun 2012 14:33:54 +0000Flying_D27407@http://forums.themeshaper.com/<p>Hi everyone,</p>
<p>I didn't expect further reactions therefor and because I had to take a break from typing my answer comes rather late. Thank you all for your contributions to my question!</p>
<p>Scottnix, I figured it was going to be a massive task cleaning up the css-file but 5 days really intimidates me. Thanks for offering your responsive Base child-theme. It looks great and I may use it (with credits) in the future for other projects.</p>
<p>Sfrangos, I understand that keeping an extra base-file with, as it says, basic rules which you probably weren't going to change anyway makes sense from an organisational point of view. Maybe I'll go for your approach.</p>
<p>Thanks again folks!<br />
Marcel
</p>ScottNix on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27257
Thu, 31 May 2012 16:00:24 +0000ScottNix27257@http://forums.themeshaper.com/<p>Thanks for the review! Sorry about the delay also, I have been out of town (no internets).</p>
<blockquote><p>This minimalistic template might not offer much in out-of-the-box style, but it isn’t meant to. Instead, it offers an incredibly flexible and mobile-friendly theme with a serious foundation on which to build.
</p></blockquote>
<p>Careful, stuff like that will give me a big ego. I recently created another theme based on <a href="http://scottnix.com/responsive-base-a-child-theme-for-thematic/">Responsive Base</a> to stress test and maybe find a few ways to tighten it up, so I will be updating a few (really minor) fixes to help it be a little more bulletproof on managing more complex content.</p>
<p>I really want to convert the CSS to SASS, but that may add another layer of complexity to it by just looking more intimidating (more files). Still pondering that one.</p>
<p>Thanks again, I appreciate it.
</p>ghostdogroma on "Horizontal menu"http://forums.themeshaper.com/topic/horizontal-menu-1#post-27201
Mon, 28 May 2012 17:08:53 +0000ghostdogroma27201@http://forums.themeshaper.com/<p>Tank is thank, and Totò is too. Sorry.
</p>ghostdogroma on "Horizontal menu"http://forums.themeshaper.com/topic/horizontal-menu-1#post-27200
Mon, 28 May 2012 17:07:40 +0000ghostdogroma27200@http://forums.themeshaper.com/<p>Yesssss!!! Tank you a lot.<br />
The sub-menù is Totò large, but probably i can repair it my self.<br />
The site is offline ne cause under construction.<br />
Bye.
</p>bogh on "Horizontal menu"http://forums.themeshaper.com/topic/horizontal-menu-1#post-27197
Mon, 28 May 2012 14:09:52 +0000bogh27197@http://forums.themeshaper.com/<p>I am not really sure of what you want, but try to add this in your style.css<br />
<pre><code>.sf-menu ul {width: 980px !important;}
.sf-menu ul li {float: left !important; width: 200px !important;}</code></pre>
<p>If this produces results similar to what you expected you should provide a link to your website.
</p>ghostdogroma on "Horizontal menu"http://forums.themeshaper.com/topic/horizontal-menu-1#post-27196
Mon, 28 May 2012 13:53:57 +0000ghostdogroma27196@http://forums.themeshaper.com/<p>Hello. Is it possible view the sub-menu page in horizontal mode?<br />
I try to modify #acces a like "display: inline" but none happen!<br />
Sorry for my poor english.<br />
Thx and bye.<br />
Marco.
</p>faeree on "Thematic Menus Demystified"http://forums.themeshaper.com/topic/thematic-menus-demystified-1/page/5#post-27172
Sun, 27 May 2012 20:46:43 +0000faeree27172@http://forums.themeshaper.com/<p>moved to own thread
</p>sfrangos on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27103
Wed, 23 May 2012 23:49:06 +0000sfrangos27103@http://forums.themeshaper.com/<p>Hi Thematic Colleagues -</p>
<p>Helga/Kathy... beware of guys named Scott.</p>
<p>Scott... your review is here: <a href="http://thematicmondo.com/thematic-child-theme-responsive-base/" rel="nofollow">http://thematicmondo.com/thematic-child-theme-responsive-base/</a></p>
<p>We made sure to let people know it is a "base" for development, and don't sell yourself short -- the media queries and other CSS3 you used are very helpful. Thanks. If you have a finished site built with it, send it along and we will review that too.</p>
<p>Great Helga that we are all on the same wavelength about making Thematic and child themes ready for CSS3 and mobile/tablet formats. Looking forward to working with you all to keep the ball rolling.</p>
<p>- Scott
</p>helgatheviking on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27096
Wed, 23 May 2012 17:32:42 +0000helgatheviking27096@http://forums.themeshaper.com/<p>i had to use @ b/c you are both named scott! will check sass out. i know twitter bootstrap is using LESS, you make a good point for using SASS
</p>ScottNix on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27095
Wed, 23 May 2012 16:10:37 +0000ScottNix27095@http://forums.themeshaper.com/<p>I will stick with your "@" format. :)</p>
<p>@helgatheviking- I keep hearing about SASS and how once people use it, they love it. I decided to convert one CSS file to try it out and I don't think I will go back. I picked SASS because people say it is the more robust than LESS (more options) and heard more "bad ass" front-end devs mentioning SASS, so I ran with that.</p>
<p>What I like most, less coding for CSS, nested structure for visual effect and it compiles in different formats so if someone doesn't know SCSS syntax, or doesn't want to use it, they can just use the compiled CSS. You can go back to using @imports in CSS since SASS will compile them all into one style sheet (modular approach, but done right). Also the output of the CSS can be changed to Normal, Nested (looks fancy), All on One Line, or Compressed, obviously you can just spit out compressed CSS for production which is easy since it is done for you on save.</p>
<p>You can leave comments with "\\" like PHP for internal comments that won't display in the CSS files, so you can go wild with commenting code which in a big project would be a killer feature. </p>
<p>Basically you already know SASS for the most part, it is just a little modification to the way you write the CSS structure. </p>
<p>Compass is a little different, it is a companion add on to SASS and adds a bunch of functionality for CSS3 and some crazier things I don't know yet, but at the least with it you won't have to do vendor prefixes ever again.</p>
<p>I would suggest just converting a CSS file you are really familiar with (makes it a easier) to SASS only (forget Compass for now) and by the time you are done, you will like it too. ;P
</p>helgatheviking on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27090
Wed, 23 May 2012 00:41:20 +0000helgatheviking27090@http://forums.themeshaper.com/<p>@sfrangos- the structure of scott's responsive base theme actually was inspirational for the new typography i've been working on. </p>
<p>@scottnix - SASS owns? is this something i should learn? have you used LESS? how does it compare? are they similar? so easy to get busy isn't it? i just got back from minneapolis and now i can't move my arm over my head... </p>
<p>enjoy vegas!!
</p>ScottNix on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27089
Wed, 23 May 2012 00:00:39 +0000ScottNix27089@http://forums.themeshaper.com/<p>A review could be pretty funny since there isn't anything aesthetically pleasing about the child theme. It truly is just a gutted Thematic, nothing special other than some best practices collected through creating sites. </p>
<p>Currently I have been a little busy, but I have a SASS/Compass child theme that will be available soon that is based off that Responsive Base theme, it will have a few more styles to make it look decent, but now that I use SASS (cause it owns) it will be my new base theme.</p>
<p>There is technically another mobile-first responsive theme for Thematic out there, but I think it is a POS. Their theme is a perfect example of what not to do with a child theme (especially one released as a base/starter theme). Tons of bad practices and won't even load on the newest Thematic SVN version, hehe. ;)</p>
<p>As far as being involved, I was planning on it, just have been super busy. I think I have finally learned GitHub, but now I am going to Vegas for a week. Just no time yet... :P
</p>sfrangos on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27087
Tue, 22 May 2012 17:03:43 +0000sfrangos27087@http://forums.themeshaper.com/<p>Hi -</p>
<p>* Scott... good to see you are on the "responsive" CSS thing -- thanks for that theme. We will review it over at <a href="http://thematicmondo.com/directory/child-theme-showcase/" rel="nofollow">http://thematicmondo.com/directory/child-theme-showcase/</a></p>
<p>* Kathy (Helga) and I were just talking about how the next upgrade of Thematic must incorporate "responsive" and "adaptive" design, so your timing is great. Hey... maybe you would like to help out the team on this?</p>
<p>* Flying_D - I agree with my colleagues on stripping down to one base Style.css sheet, but find myself now also adding a call to "Normalize" CSS (see: <a href="http://necolas.github.com/normalize.css/" rel="nofollow">http://necolas.github.com/normalize.css/</a>) by including their latest file in the child theme folder. I do not add it into the main child theme CSS file because I want to be able to easily update it as they make changes, and because it is in the same folder and pretty lightweight, the call does not drain resources too much.</p>
<p>- Scott
</p>ScottNix on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27042
Thu, 17 May 2012 21:20:06 +0000ScottNix27042@http://forums.themeshaper.com/<p>The "do some serious cleaning-up" part of combining CSS and removing redundant code is actually a fairly massive task. I recently did it since I needed a stripped down starting point for child themes. It took me about 5 days.... hehe, was a pain. </p>
<p>While this theme is primarily for responsive sites, if you needed a stripped down style sheet (also removes a lot of default styling provided by thematic), check out the <a href="http://scottnix.com/responsive-base-a-child-theme-for-thematic/">Responsive Base</a> child theme
</p>Flying_D on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27035
Thu, 17 May 2012 15:42:46 +0000Flying_D27035@http://forums.themeshaper.com/<p>Thank you for that quick answer! Your support is awesome! </p>
<p>Okay, I understand the modular approach but it does not seem that important to me at the moment. Of course it would make changes of whole colour schemes etc. a lot easier. </p>
<p>For now I'll be using the 'big sheet' as a guideline to learn from but as soon as I feel I've got the design nailed down I'll do some serious cleaning-up ;-) I think I like the minimal approach the best.
</p>helgatheviking on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27030
Thu, 17 May 2012 14:30:18 +0000helgatheviking27030@http://forums.themeshaper.com/<p>the reason they are separate is to (in theory) make them more modular. so it's easier to swap out say... the typography.css (which are mostly from blueprint) and swap in say the rules from baselinecss.com or something. </p>
<p>as far as website performance, it absolutely makes sense to serve the fewest and smallest stylesheets you can get away with.
</p>Flying_D on "Multiple CSS files"http://forums.themeshaper.com/topic/multiple-css-files#post-27027
Thu, 17 May 2012 14:06:25 +0000Flying_D27027@http://forums.themeshaper.com/<p>Hi there,</p>
<p>I created a child theme <a href="http://www.ojas.kamst.com" rel="nofollow">www.ojas.kamst.com</a> </p>
<p>I noticed there was a lot of redundance and overruling going on so I copied all the rules from the different css-files (which are originally imported) into one single css-file so I could see all the rules in one file. I have 2 questions:</p>
<p>1. Is it good practice to merge all files together in one or what is the advantage of keeping them apart?<br />
2. Is it a good idea to delete all redundant rules?</p>
<p>Thanks in advance for your answers<br />
Marcel
</p>boerenooi on "Thematic Menus Demystified"http://forums.themeshaper.com/topic/thematic-menus-demystified-1/page/5#post-27007
Wed, 16 May 2012 11:46:21 +0000boerenooi27007@http://forums.themeshaper.com/<p>Hi helgatheviking</p>
<p>I'm having hard time getting this right. I need to put my menu into the start of my main container where the content is. How would I achieve this?</p>
<p>Regards<br />
B<br />
xxx
</p>helgatheviking on "Help with CSS - Drop down menu IE"http://forums.themeshaper.com/topic/help-with-css-drop-down-menu-ie#post-26754
Wed, 02 May 2012 06:05:32 +0000helgatheviking26754@http://forums.themeshaper.com/<p>what? dude, your post makes zero sense to me. sorry, until you clarify some things I can't help you. if you are using thematic and you need help styling your dropdown menu then please refer to the Styling the Beast section of the the mega menu thread:<br />
<a href="http://forums.themeshaper.com/topic/thematic-menus-demystified-1" rel="nofollow">http://forums.themeshaper.com/topic/thematic-menus-demystified-1</a>
</p>Anouk_86 on "Help with CSS - Drop down menu IE"http://forums.themeshaper.com/topic/help-with-css-drop-down-menu-ie#post-26751
Wed, 02 May 2012 05:48:49 +0000Anouk_8626751@http://forums.themeshaper.com/<p>Hi All,</p>
<p>Im stuck when it comes to the drop down menu. I cannot select the children, as those disappear once I hover over them. I looked it up on the internet and found that a javascript must be added to have this sorted in IE.<br />
I added that javascript, but don't know what I should add to the CSS file.</p>
<p>Can anyone please help me?<br />
<pre><code>.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 &#39;sticky bug&#39; */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 29x;
top: 85px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 170px; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}</code></pre>Greenbear on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26743
Wed, 02 May 2012 02:08:31 +0000Greenbear26743@http://forums.themeshaper.com/<p>Ahh...ok. Good to know.
</p>helgatheviking on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26707
Sun, 29 Apr 2012 19:16:24 +0000helgatheviking26707@http://forums.themeshaper.com/<p>no, the OP wanted to display the date outside of the #content div. and when you picked up the thread you wanted to similarly display something outside of the #content div. i showed how to move the markup outside of #content instead of trying to bootleg is with CSS absolute positioning or negative margins or overflow.
</p>Greenbear on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26706
Sun, 29 Apr 2012 17:51:18 +0000Greenbear26706@http://forums.themeshaper.com/<p>Thanks Helga, but I think you have posted a reply to a different thread? Or am I missing something?</p>
<p>A follow up to my follow up...a quick note on the bottom of the #content, it can come up short if there are any floating divs that would normally be caught by the overflow...simply add a div at the bottom with a clear:both to draw the #content down. A side effect of WP is that when blank divs are entered into the html they get lost if switched to visual...simply place a . between the clearing div tags and style the color the same as your background and it holds when in visual mode (mostly for clients who are more WYSIWYG oriented).
</p>helgatheviking on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26519
Sat, 21 Apr 2012 18:03:34 +0000helgatheviking26519@http://forums.themeshaper.com/<p>so i was mistaken a year ago (must've been a newb back then). you need to add the date to the thematic_abovecontent hook like so:<br />
<pre><code>function kia_add_date(){
if(!is_single()) return;
echo thematic_postmeta_entrydate();
}
add_action(&#39;thematic_abovecontent&#39;,&#39;kia_add_date&#39;);</code></pre>
<p>i made the assumption that this was only going to happen on single posts. then i presume you'll want to remove the date from its default position which you can achieve like so:</p>
<pre><code>function kia_remove_date($postmeta) {
if(!is_single()) return $postmeta;
ob_start(); ?&gt;
&lt;div class=&quot;entry-meta&quot;&gt;
&lt;?php echo thematic_postmeta_authorlink(); ?&gt;
&lt;?php echo thematic_postmeta_editlink();?&gt;
&lt;/div&gt;&lt;!-- .entry-meta --&gt;
&lt;?php
$postmeta = ob_get_contents();
ob_end_clean();
return $postmeta;
}
add_filter(&#39;thematic_postheader_postmeta&#39;,&#39;kia_remove_date&#39;);</code></pre>
<p>now that the markup has been rearranged it should be super simple to style as desired
</p>Greenbear on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26515
Sat, 21 Apr 2012 16:10:31 +0000Greenbear26515@http://forums.themeshaper.com/<p>Ok, I've figured this out and thought I would pass on my findings for anyone else who runs into this.</p>
<p>It appears that it's an overflow issue. I can only get it to work when the overflow is set to visible for both the #content and #main ids. This may require some #content bottom margin though as the main will lose it's margin-bottom. It may also create other problems...but that's how it breaks out.
</p>Greenbear on "How can I get content/an element/image/etc. OUTSIDE of #content div?"http://forums.themeshaper.com/topic/how-can-i-get-contentan-elementimageetc-outside-of-content-div#post-26501
Sat, 21 Apr 2012 00:50:56 +0000Greenbear26501@http://forums.themeshaper.com/<p>I just happen to be having this problem myself so I thought I'd chime in here.</p>
<p>I can't seem to get the content to go outside of the #content no matter what I try (ie. position absolute or relative) I've set the margin right to a negative (relative), tried overflow:visible, tried resetting the width of #main, #container etc... all to no effect, the content I am trying to set outside still gets cut at the outside of the #content or #container edge.</p>
<p>I am interested in helgatheviking's suggestion but am not sure how to proceed there...any suggestions on how to break out?
</p>helgatheviking on "Thematic Menus Demystified"http://forums.themeshaper.com/topic/thematic-menus-demystified-1/page/5#post-26482
Fri, 20 Apr 2012 03:02:35 +0000helgatheviking26482@http://forums.themeshaper.com/<p>@mark, please create a new topic for your question. in said topic, please explain what you are trying to achieve, what you are trying, and what results you are seeing versus what you are expecting. </p>
<p>just from #header {clear:both;} i can't really figure out what you want to do.
</p>markbuskbjerg on "Thematic Menus Demystified"http://forums.themeshaper.com/topic/thematic-menus-demystified-1/page/5#post-26458
Thu, 19 Apr 2012 14:10:26 +0000markbuskbjerg26458@http://forums.themeshaper.com/<p>Hi ... I guess your super help wasn't enough for a thematic noob as me..<br />
I'm trying to style menu in a child theme of Thematic.. I have made no alterations yet, so i knocked out the header with<br />
<pre><code>#header {
clear: both;
}</code></pre>
<p>and pasted in your CSS...<br />
has something changed in the menu structure since you posted the code a year ago? I see no changes to my menu at all...</p>
<p>i've also tried altering it in other ways, but nothing happens...<br />
I imported the style.css from the parent theme with </p>
<p><code>@import url (&#39;../whiteboardframework/style.css&#39;);</code></p>
<p>could that be a problem?<br />
It is my first time with child themes so i'm quite puzzled! (more used to just tweak a theme straight ahead)
</p>