Not signed in (
Sign In)
Categories
Welcome, Guest
Want to take part in these discussions? Sign in if you have an account, or apply for one below
-
Feeds
Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.
-
I'm working on new theme
the background is not exactly what I want, but an idea of what I have in mind
any suggestions or help is appreciated
EDIT
obviously it does not work with any version of IE... i'm sorry -
Looks great. Maybe build a nice cool search box into it rather than have people install the standard widget version?
I also just did one with the tagcloud of categories positioned along the bottom, so enabling the bottom widget position is something you could build in - to give people a bit more flexibility in positioning. I like it, as it keeps the length of the right hand column short. Feel free to copy anything I did there, though it's a bit hacky in places.
edit: but a 3D rotating tagcloud like this would be super-cool! -
Thank you stanley.
I have one problem: i have no idea how to customize one plug in in other position that standard one.
I had study the css sintax on flatpress leggero theme, but i have no knowledges about the sintax of php or other...
i have no idea how to do it... :-( -
Me either, really - I just hack around until something works!
How I did mine was to alter my footer.tpl like so:
</div>
<div id="btm-tagcloud">
<form method="get" action="{$smarty.const.BLOG_BASEURL}search.php">
<input class="sbox" name="q" />
<input type="hidden" name="stype" value="full" checked="checked" />
<input type="submit" class="srch-submit" value="" >
</form>
{widgets pos=bottom}
<div id="{$id}">
{$content}
</div>
{/widgets}
</div>
<div id="footer">
<p>
{action hook=wp_footer}
<br />
Type some custom footer text here
</p>
</div><!-- end of #footer -->
</body>
</html>
and then added bits to my stylesheet like this:
#btm-tagcloud{
width:76em; /* setting to restrict width to same as my site background */
margin: 0 auto; /* float the footer in the middle */
text-align:center;
color:#FFFF00; /* default font color */
clear:both;
padding:0.5em; /* for "below-footer" */
}
#btm-tagcloud .srch-submit{
background:url(../imgs/searchbutton3.gif) 0 0 no-repeat;
border:none;
width: 57px;
}
/* for search field with icon */
#btm-tagcloud .sbox {
line-height:16px;
width:230px;
} -
ok, i try to add a div for search box in my template... i'll do something, i don't know what, but something :-)
-
ok,
i have introduce a div to display the searchbox above the header.<div id="searchbox" class="searchbox">
{widgets pos=bottom}
<div id="widget-searchbox" class="widget-searchbox">
{$content}
</div>
{/widgets}
</div>
unfortunatelly i have to configure the widget-panel to display the search at the bottom (or in another place, but the top, right and left is already used)
there is a solution to display the search box always, without configure the widget panel?
I have try to cange{widgets pos=bottom}with{widgets}but that is not the solution.
The result is this (and i like it)
-
I originally copied mine off the inove theme, but I think if you just hard code the search form where you want it (it doesn't need to be in a widget panel), and then style it how you want, it should work.
<form method="get" action="{$smarty.const.BLOG_BASEURL}search.php">
<input class="sbox" name="q" />
<input type="hidden" name="stype" value="full" checked="checked" />
<input type="submit" class="srch-submit" value="" >
</form> -
grate, it works!
i have upload the new files. You can see the result at my blog ;-)
i have change the name of the theme.
I was inspired by a theme for joomla called Royal Avelion, so... -
Awesome!
And the countdown clock is for... when England win the world cup? :p -
no, when i'll lost my freedom... hehehe
-
i have finish to built the 800px version based on image of border and trasparency and no on the CSS3 propriety, but it works fine
i'm working on the 1024px -
Looks great - the search box looks like an LCD display (but you missed the "r" out of "search").
Maybe the disclaimer box could use a little padding all around, to keep the text away from the border?
This background looks even better - I look forward to seeing the wider version. -
ok, thanks so much for your debug
the search is without "r" becouse i'm a "coglione"... in english... a ball of dick... hehehe
the background is the original of the template for joomla.
I would like to make a personal background but i'm not be able to do it, so i have use the original images... i have see the original template here: http://lnx.giulyx.it/website
now i have made the 1024px version. you can see the result at my blog, for the moment...
the disclamers is a little bug of my CSS.
i have use the justify paragraf, so the bbcode have create a div to display the paragraf in that way.
but, If i add margin or padding in the div of the column, all the div have the new margin, and all the widget make error.
the only way to dispaly the margin is to write the text with html and not with the BBcode (like now)
I have to upload the two version (800 and 1024) on the wiki
:-) -
Looks great - well done.
I suppose you "could" merge the two versions into one and give the user the choice of 800 or 1024px by using a style switcher - if you wanted to, lol!
There's an example of that here (view the source to see how it works). In that case it just changes the colours but I suppose you could use it to let the user pick which width suits them best. The alternate style sheets need to have the same title attribute as the option value in the drop down list, then there's a .js file here which controls it all (save this in your theme's "res" folder).
In your case you'd need to set one of the widths (e.g. 1024px) as the default in your main css file, then add another stylesheet in your theme's res folder called 800px.css (for example) and add this alternate stylesheet to your theme's header.tpl, just before the closing </head> tag, like so:{action hook=wp_head}
<!-- add user preferred styles -->
<link rel="alternate stylesheet" type="text/css" media="screen,projection,handheld" title="800px"
href="fp-interface/themes/avelion1024/gold/res/800px.css" />
<script src="fp-interface/themes/avelion1024/gold/res/styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>
and then you'd add your select box somewhere (see the source of the link above), but you could probably hack that to work with just a hyperlink instead of a select box.
The alternate stylesheet doesn't need to be the full stylesheet - just the parts which are different to the 1024px version.
It's just a thought, in case you want to try it. -
nice solution.
I try to do it..
thank you very much!! -
lantaca,
I'm just trying the 1024px version but I found a problem. In your static.tpl you have the side column commented out:<!-- {include file=widgetsc.tpl} -->
I tried to uncomment it but the widgets appeared under the main content, not in a column on the right. If you view the blog, or contact.php everything is fine. I'll try to fix my version and report back, but was there a reason why you did that?
EDIT: I changed line 157 in common.css to read:#main, #static {
That seems to have fixed it, but you should take a look in case anything else needs correcting.
I figured out what "condividi su" means. -
-
CommentAuthorNoWhereMan
- CommentTimeJun 10th 2010
I just came here to say that the right way to comment out something in a template is {* comment here *} unless you do want the comment to be output (in this case, you don't) -
-
Posted By: NoWhereManI just came here to say that the right way to comment out something in a template is {* comment here *}
Thanks - I never knew about that one.
Lantaca, I've discovered another problem - if you have very long pages then the background starts to repeat itself.
Here's a screenshot of what I mean (n.b. I wouldn't normally have such long pages, this is just a rough draft of a new web site I'm doing so I thought I'd use it to test your theme).
-
about the second problem, i know it...
i'm new about css an html, so some solution to built the background ave a little bugs...
in the original template of joomla, there is a way to display the background tha i don't undrestand.
I think that the problem is the height of the head.
the image of head of original theme have a very big height, that is ugly to display in flatpress.
so i have decided to fusion the background of head with the body one.
Onlu the footer cange the background and display the bottom border.
The solution is to increase the height of that image (naw is 2000px), but consider its weight....
I'm working to resolve this problem (studing css...) -
about the first problem, your solution is the good one.
In have divided the static page in some div to have a width 100% page.
"condividi su" is "share" in english.
i've upload the new version of theme. Download here -
Great looking theme, well done. Did you try the this .js to improve the support for IE. http://code.google.com/p/ie7-js/
It won't make it perfect, but it will improve it a little. -
Posted By: lantacaThe solution is to increase the height of that image (naw is 2000px), but consider its weight....
I just increased the height to 3000px for now. The file size is actually little smaller - I just did it quickly at the highest compression level so it's only 24bpp, not 32bpp like the original. It looks ok on my screen, but my laptop is very old - so maybe on a better screen it won't look so good.
See new version.
Note that I changed the file name slightly (rather than over-write the original), so if you want to use the same file either rename it back to the original, or change the file name in your css file.
Here's a copy of the new image in case you want to try it. -
Posted By: CentaurGreat looking theme, well done. Did you try the this .js to improve the support for IE.http://code.google.com/p/ie7-js/
It won't make it perfect, but it will improve it a little.
Nice, it resolve some little problem, but not introduce rouded corner, alpha channel in rgba for trasparency...
I've introduce in header.tpl the compatibility with IE9 and now IE7 browser see the "condividi su" image better than IE8
Thank youPosted By: Stanley
Posted By: lantacaThe solution is to increase the height of that image (naw is 2000px), but consider its weight....
Here'sa copy of the new imagein case you want to try it.
Thank you too stanley.
Try also the new version of theme, there are new stile and i have fixed some little bugs.
I'm study a new elegant solution to display background with some little image instead one an big one. I hope to be successful
If you want to collaborate... I'm drawing my ideas here -
Glad I could help a little bit. The thing about supporting IE these days is not to make it look perfect (the way it looks in other browsers), but to make the theme still usable. If you really went overboard in trying to fix everything just for IE then the stylesheet would be much larger and you would have to put a lot of extra work in, so rather make it look orite in IE, as long as all the links on the navbar is reachable then thats enough.
Also, try to add a friendly message for IE users, telling them it is time to upgrade :), just like on Youtube and other Google sites.
I hope that helps.
Another thing, have you tried CSS sprites that just contain the four corners, in place of one massive background. However, it may be difficult to make the same effect with sprites. Look at Ask.com, they use sprites for the four corners, maybe you can try to replicate that effect. -
I have no problem to create the four corner, it is possible adding a table adn image or by css3 only.
But.. the background i have chosen is very particular becouse the header of the template is lower than the nuances in the top.
I can't assign that image only to the header. So i have to fusion the header background with the body one and the actual solution is a big image...
I'm trying to resolve this problem introducing some div to create the background, but i have to cange all the structure of the theme
and I'm not so good.... :-( -
i'm very happy to see "I have resolve the problem!"
Here you can download the last version of the theme, Avelion 1.2
Now the background is built by some image and not only by a big one
bye
edit:
relise 1.3
minor bugfixed
introduce a new function: the top bar link/button remain selected in its page (tab menu plug-in required see VDFN blog) -
wow, impressive. I have made a CSS3 version of the transparent border, which looks almost identical like the one you have in the picture... If you are interested then I will give you the code. I have a screenshot, but my internet is a little bit crappy at the moment, so I will upload it later.
-
I also have a few suggestions. Add some effect with the top header (name of blog), like text shadow, or whatever.
Also I see there is no hover state for the buttons for posting a comment, however there is a active state. -
Here is the screenshot, I know it is not much, but I just scraped a few things together to show what I thought. I think that it can be adjusted to look almost identical to the picture version you have.
-
Lantaca, very good.
I installed it and added a theme switcher if you want to try it. The first time you switch styles it takes a second or so to load the new images, but after that it works very quickly. This may not be desirable in the final version, but it can be useful when you are developing your themes and quickly want to see what your changes look like in each style.
Avelion with style switcher
(note for anyone who may visit this post in the future - in case that link no longer works - you can read how this was done further up in this thread although, in this case, I added the form with the select box to widgetst.tpl )
I also made my own change to common.css in each style - as before I added the column back in to the static.tpl and made the appropriate change in common.css (only now it is on line 204, and not 157 as I said for the earlier version).
The only other thing I did was to uncomment the $subject again, in static.tpl, to get my page titles back.
Finally, the font colour in the footer is set to #fff for all styles, but this is no good for the Black & X-Ray styles, so I changed these to #000
And you still spelt "Search" without an "r" :p - in point of fact (instead of typing "Seach" or "Search") you should use the following tag here, which will insert the correct label from the language file.{$lang.search.submit}
==== some more notes on the style selector ====
In keeping with the FP/Smarty way of doing things the labels you see in the drop down are actually tag values (e.g. {$lang.avelion.style.gold}) - I added a section to the fp-interface/lang/en-us/lang.default.php file like so:$lang['avelion']['style'] = array(
'default' => 'Default Style',
'gold' => 'Gold',
'ocean' => 'Ocean',
'black' => 'Black',
'xray' => 'X-Ray',
'changestyle' => 'Change Style '
); -
-
CommentAuthorNoWhereMan
- CommentTimeJun 19th 2010
you can also make it a plugin+widget; then you can do
$l=lang_load('plugin:myplugin'); (loading from fp-plugins/myplugin/lang/lang.en-us.php)
and output HTML in your
return array(
$l['plugin']['styleswitcher']['widgetsubject'], // widget title in the lang file
$html_for_the_select // actual html content
); -
-
Thanks, I'll try and have a look at doing it that way.
-
there is a little error with the color of background oh black style. in common there is #000 but you have to cange it with the color of darknes part of background image
can you get me the version with the style change? -
Here it is - be sure to follow the brief instructions included on that web page. It's quite easy.
-
hi,
i try to do a stylecanger without a menù<form id="switchform">
<select name="switchcontrol" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="Royale" selected="selected">Royale</option>
<option value="gold">Gold</option>
<option value="ocean">Ocean</option>
<option value="black">Black</option>
<option value="xray">X-Ray</option>
</select>
</form>
but with some links.
Have an idea how to do it? -
-
CommentAuthorChrisBlank
- CommentTimeJul 12th 2010 edited
Maybe you should try these:<a onclick="chooseStyle('Royale', 60)">ROYALE</a>
<a onclick="chooseStyle('gold', 60)">GOLD</a>
<a onclick="chooseStyle('ocean', 60)">OCEAN</a>
<a onclick="chooseStyle('black', 60)">BLACK</a>
<a onclick="chooseStyle('xray', 60)">X-RAY</a> -
-
perfect! thank you very much
1 to 37 of 37