I am still here..
Hey, I know it's been a while since my last post but Bravenet has been keeping me pretty busy and haven't had much time at home. Will be updating this blog over the weekend with new tips and tricks for Viviti! I think we should have a look at jQuery (http://www.jquery.com) and what we can do wit…
Changing your Favicon on Viviti
Just updated rogtopia.com to use a custom favourite icon by editing my default html template and by uploading a favicon.ico to use for the shortcut link.
To update your Viviti site with a custom icon, find or create a new favicon.ico file and upload it using "Files" from your Viviti toolbar. I cre…
Toying with Viviti CSS
Guinness too many
Got out last night with some co-workers and really had a blast. Was nice to get away from the World of Rogtopia (Warcraft) and face the real world. Save for the scary cougar that was hitting on us, it was alot of fun. 3 timmy hoes this morning seems to have cured me for the most part but I doubt …
blog hater no more
I have never really had an interest in blogging before until I started toying with the Viviti System. Being a developer and a designer, I really hate to use systems that give me no control over the markup structure ( or scary markup is ouputted ) and or stylesheets. Some do, but most have horrible…
I am still here..
Hey, I know it's been a while since my last post but Bravenet has been keeping me pretty busy and haven't had much time at home. Will be updating this blog over the weekend with new tips and tricks for Viviti! I think we should have a look at jQuery (http://www.jquery.com) and what we can do with it.
Changing your Favicon on Viviti
Just updated rogtopia.com to use a custom favourite icon by editing my default html template and by uploading a favicon.ico to use for the shortcut link.
To update your Viviti site with a custom icon, find or create a new favicon.ico file and upload it using "Files" from your Viviti toolbar. I created mine from my logo as a PNG file and used an online tool to convert it to an ICO file.
After you have uploaded your file, it will be available from your viviti domain within the path of /files/others/favicon.ico. Update your default.html with the following code in the <head></head> section of the document.
<link rel="shortcut icon" href="http://your.viviti.com/files/others/favicon.ico"> Don't forget to replace your.viviti.com with your actual viviti host.
There is nothing at all wrong with the Viviti favicon that gets injected; in fact, it's very elegant and precise. But for those of you that want something different or custom to your theme, then the above should work for you. Happy Coding.
Toying with Viviti CSS
Been getting deeper into my base stylesheet for this site and have found it pretty easy to customize any element with Firefox and Firebug. A combination of the Firefox Browser and Firebug developer tool, you can easily find a specific element on the page simply by right-clicking it and selecting "Inspect Element".
In the screenshot to your right, I am right-clicking the comments section used for my blog entries. This will allow me to figure out what CSS declaration to use to customize that piece of a Viviti blog component.
The Firebug Workspace
Firebug Debugging Tool (http://getfirebug.com/) allows you to expose not only the markup that wraps the contents of your website, but all the generated HTML that may be dynamically injected via javascript.
Above, we see what has happened after choosing to Inspect Element on the comments area. The containing element with class of metadata (<div class="metadata">..</div>) was selected in the Firebug HTML window and the element itself is highlighted on the page. Now we can easily figure out how to target that with our CSS selector.
The Comments CSS Selector
In this screenshot, we are viewing Firebug's Style inspector/editor which shows the CSS declaration used to add that subtle rounded edge bar.
Since the DIV metadata container was contained within a post_wrapper parent, I kept the CSS selector down to .post_wrapper .metadata. { .. }. If you step back through the markup, the master parent of each blog is conveniently classified as blog_post. So your selector could even be .blog_post .metadata { // your css properties; }
Whatever you choose to do with your Viviti website and/or blog, Firebug is an invaluable tool for any web geek of any skill level. Later on, let's discuss some hidden javascript gems that the Viviti system ships to your website.
Guinness too many
Got out last night with some co-workers and really had a blast. Was nice to get away from the World of Rogtopia (Warcraft) and face the real world. Save for the scary cougar that was hitting on us, it was alot of fun. 3 timmy hoes this morning seems to have cured me for the most part but I doubt I will do that again mid-week.
UPDATE: Feeling better now and ready to go ROCKIN again tonight. See.. I am sporting rock fingers and wearing shades. How cool is that. Tonight the adventure continues.
Photo taken by Mike Haugland
blog hater no more
I have never really had an interest in blogging before until I started toying with the Viviti System. Being a developer and a designer, I really hate to use systems that give me no control over the markup structure ( or scary markup is ouputted ) and or stylesheets. Some do, but most have horrible interfaces for applying customizations.
Who wants to go through lines of a config file defining separate RGBs for various obscurely named variables. Who really wants to have to use some sorta bloated web-based system that essentially does the same. Dumps style variables into databases and then uses that for theming.
I love how I have full control to creating my own template that can be imported and used by the Viviti system. Even if something isn't documented, finding out how to style a new component or a blog component is as simple as looking at the HTML output and applying new CSS declarations to your templates CSS file.
I will get into how to customize components in a later post. I went off on a tangent; I HATED BLOGGING. Now I think I might be able to tolerate it using a system such as this with all the neat components that one can use.
I am still here..
Hey, I know it's been a while since my last post but Bravenet has been keeping me pretty busy and haven't had much time at home. Will be updating this blog over the weekend with new tips and tricks for Viviti! I think we should have a look at jQuery (http://www.jquery.com) and what we can do with it.
Changing your Favicon on Viviti
Just updated rogtopia.com to use a custom favourite icon by editing my default html template and by uploading a favicon.ico to use for the shortcut link.
To update your Viviti site with a custom icon, find or create a new favicon.ico file and upload it using "Files" from your Viviti toolbar. I created mine from my logo as a PNG file and used an online tool to convert it to an ICO file.
After you have uploaded your file, it will be available from your viviti domain within the path of /files/others/favicon.ico. Update your default.html with the following code in the <head></head> section of the document.
<link rel="shortcut icon" href="http://your.viviti.com/files/others/favicon.ico"> Don't forget to replace your.viviti.com with your actual viviti host.
There is nothing at all wrong with the Viviti favicon that gets injected; in fact, it's very elegant and precise. But for those of you that want something different or custom to your theme, then the above should work for you. Happy Coding.
Toying with Viviti CSS
Been getting deeper into my base stylesheet for this site and have found it pretty easy to customize any element with Firefox and Firebug. A combination of the Firefox Browser and Firebug developer tool, you can easily find a specific element on the page simply by right-clicking it and selecting "Inspect Element".
In the screenshot to your right, I am right-clicking the comments section used for my blog entries. This will allow me to figure out what CSS declaration to use to customize that piece of a Viviti blog component.
The Firebug Workspace
Firebug Debugging Tool (http://getfirebug.com/) allows you to expose not only the markup that wraps the contents of your website, but all the generated HTML that may be dynamically injected via javascript.
Above, we see what has happened after choosing to Inspect Element on the comments area. The containing element with class of metadata (<div class="metadata">..</div>) was selected in the Firebug HTML window and the element itself is highlighted on the page. Now we can easily figure out how to target that with our CSS selector.
The Comments CSS Selector
In this screenshot, we are viewing Firebug's Style inspector/editor which shows the CSS declaration used to add that subtle rounded edge bar.
Since the DIV metadata container was contained within a post_wrapper parent, I kept the CSS selector down to .post_wrapper .metadata. { .. }. If you step back through the markup, the master parent of each blog is conveniently classified as blog_post. So your selector could even be .blog_post .metadata { // your css properties; }
Whatever you choose to do with your Viviti website and/or blog, Firebug is an invaluable tool for any web geek of any skill level. Later on, let's discuss some hidden javascript gems that the Viviti system ships to your website.
Guinness too many
Got out last night with some co-workers and really had a blast. Was nice to get away from the World of Rogtopia (Warcraft) and face the real world. Save for the scary cougar that was hitting on us, it was alot of fun. 3 timmy hoes this morning seems to have cured me for the most part but I doubt I will do that again mid-week.
UPDATE: Feeling better now and ready to go ROCKIN again tonight. See.. I am sporting rock fingers and wearing shades. How cool is that. Tonight the adventure continues.
Photo taken by Mike Haugland
blog hater no more
I have never really had an interest in blogging before until I started toying with the Viviti System. Being a developer and a designer, I really hate to use systems that give me no control over the markup structure ( or scary markup is ouputted ) and or stylesheets. Some do, but most have horrible interfaces for applying customizations.
Who wants to go through lines of a config file defining separate RGBs for various obscurely named variables. Who really wants to have to use some sorta bloated web-based system that essentially does the same. Dumps style variables into databases and then uses that for theming.
I love how I have full control to creating my own template that can be imported and used by the Viviti system. Even if something isn't documented, finding out how to style a new component or a blog component is as simple as looking at the HTML output and applying new CSS declarations to your templates CSS file.
I will get into how to customize components in a later post. I went off on a tangent; I HATED BLOGGING. Now I think I might be able to tolerate it using a system such as this with all the neat components that one can use.
