Flexsitez - Create a custom theme, Step by Step
Posted by - NA - on 05 March 2013 01:31 PM
Flexsitez - Create your own CUSTOM Theme!

It is important to keep in mind that your Flexsitez template will be installed using the Default theme. You can change your theme easily, and as often as you would like, using the instructions provided at http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=441

FUN FACT!! 
ALL of the available Flexsitez themes were created using the Default theme as a basis, and building on it!

Now let's get started!

The first step in creating your own custom Flexsitez theme is 'finding your vision', and deciding how you want your blog website to look, and then creating or locating the type of elements you might want to use. This may include:

  • Header elements like borders, toppers, or other decorations

  • Wrapper block, top, bottom, and side elements, such as borders or shadows

  • Post Title & Date icons

  • Blog Posts Divider

  • Custom Social Media Icons (Facebook, Twitter, Pinterest, etc.)

  • Backgrounds



Some great places to find this sort of content:

TIP!!
Did you know that you can download and customize ANY of our template's default elements or icons by right-clicking on them within the area of the wp-admin they appear, and saving them to your desktop???

What we recommend doing is starting with one of our base themes that is the closest to the look you are going for. From there you can use the Flexsitez settings in the wp-admin to adjust all visual aspects to make it exactly as you envision.

Now, to demonstrate the basics of creating your own theme, I'll download and install a new fresh Default theme:



Next, I am going to add a background image (via Background Settings), add some borders to my wrapper block (via Wrapper Block settings), and change the wrapper block border to black (000000)



Then, I am going to make some adjustments to the header to remove the logo space, so that I can add it as a custom theme icon/button by setting the 'Header Logo Panel Width' to 0, the 'Header Logo Panel Opacity' to 0, and removing the logo image (all within the Header Settings > Slideshow General Settings > Current Layout Options area).

Next, because I want to add a custom element to the TOP of my blog, I want to further adjust the Wrapper Block Settings, and set the 'Content Wrapper Top Margin' to 50px.

Then, I will go to the Custom Theme Images/Buttons area, and upload my new element. For this particular element, because I want it anchored at the TOP of the header, and not scroll with the page, I will set the Custom Image Link Position to 'Content Top Left', after which I will need to look at the front end, and gauge the amount of top/left adjustments will be needed to create the look I am shooting for. In the case of this example, I set the 'Image Top Adjustment' to -50, and the 'Image Left Adjustment' to -275.



Next, I'll move on to the menu......

I want to utilize the custom menu images feature (http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=435) so, I am going to start by making the menu a bit taller. For that, I will head to Menu Settings, and make some adjustments.

First, I'm going to change the button background color (this is the main color of the menu bar), and top and bottom border colors to black (000000), and then set the Menu Bar Height to 75 to accommodate my buttons. Next, I'll add my custom menu buttons (made using http://pixlr.com/editor/ by the way) via the 'EDITING PER MENU ITEM IMAGES' portion of the Menu Settings area. It's important to note that you will need a separate button for each menu item, and, if you intend to use DROP down buttons, you will want to either adjust your menu settings to make them look nice, or upload custom images for them as well!

After I've uploaded the images, I will set 'Show Menu Text' to FALSE, and SAVE my menu settings! (This is IMPORTANT!! Until the general menu settings are saved, you will NOT see your images!!)

Note that you WILL need to make further adjustments to some settings, in order to get the spacing and alignment of your menu images perfect. These settings include the MENU Left Margin, and the Image Margin Left and top for EACH button uploaded!


Next, I'll customize my Twitter settings, via the Content Settings > Twitter Feed Settings area, by editing the overall settings, and uploading my own feed background!



Moving onto those nifty social media icons at the top right, I am going to first download one of the originals, so that I can get an idea of the base sizing. The default (on the DEFAULT template) buttons are sized to 208px WIDE X 52px TALL, and are designed to 'hide' behind the header, and slide out when rolled over. In this case, I think I'd like to make them a tad larger, and eliminate the slide.

Once you've got your new icons ready to upload, you will FIRST want to note the current button settings, just to make things easier on yourself!? Then, upload yours using the same basic settings. In this case, I added mine with these settings:
  • Custom Image Link Position = Content Top Right

  • Image Link Rollover Animation = Slide Right, Animation Amount = 10

  • Order Number = 1, 2, and 3 (Facebook, Twitter, RSS)

  • Z-index = 1

  • Bottom Margin = 15

  • Side Margin = -75

  • All other settings at ZERO


The next area I am going to customize is the Post Title and Date Settings, where I can adjust the alignment, add a blog post divider, customize colors, and even add custom blog post icons.

Before:


TIP!!
If you opt to use a blog post divider, you will want to adjust the Content Stylings > IMAGE GENERAL STYLING SETTINGS, because the post divider image will have a BORDER if your general images are set to have a border!


After I've set my Post Title and Date Settings, I'm going to adjust my Comment Settings, and add some custom icons there, and make a few more adjustments to the Content Stylings to lose the blue Image Caption Background Color!

After:


Now, to have some fun, and add some FLAIR with a great font plugin! http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=492

After adding my fonts using the plugin, I went back though the different areas where the sizes and colors can be adjusted, and changed settings as needed to accommodate for the new fonts, and achieve the look I wanted, and then moved on to my Galleries Settings, where I edited the general color settings, and added some custom navigation buttons



These are just the basics of creating your OWN blog theme using the Flexsitez and it's features! It's really important to remember a few things:

Experimentation is KEY. Whether adding custom elements or just changing settings, you WILL have to use a 'trial and error' tactic, and make adjustments as you go!

Patience is a virtue! But, should you run out, you can contact support@portfoliositez.com, and we are happy to help! And don't forget to check out the ever growing collection of Flexsitez articles available in our Knowledgebase here: http://www.portfoliositez.com/support/index.php?_m=knowledgebase&_a=view&parentcategoryid=120&pcid=0&nav=0


HAVE FUN!!

My finished product:

(311 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: