Jump to content

[3.4] ZuZuSkin - Easy to change


onlyME

Recommended Posts

%7Boption%7D



File Name: [3.4] ZuZuSkin - Easy to change

File Submitter: onlyME

File Submitted: 20 Sep 2011

File Category: Color Change Skins

Supported Versions: IP.Board 3.2.x, IP.Board 3.3.x, IP.Board 3.4.x



ZUZU skin is simple, easy on the eyes. It has been modified closely match the default skin, so it's compatible with all IPS addons. You can edit it easily to create a unique style for your forum.

ZuzuSkin allows admins to customise the skin in a variety of different ways through the ACP: font, wallpaper, forum width, sidebar width, position of sidebar, position of userinfopanel, customize the color of each element on the interface

You do not need to spend more time, with ZuzuSkin, you can change the look of the appropriate forum for every season, holiday, event... in the easiest way

First, take a look at the default
%7Boption%7Ddi-YJRZ.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="598">

And here are the changes
Valentine Day
%7Boption%7Ddi-KYY9.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="634">

Happy Easter
%7Boption%7Ddi-3VYD.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="615">

Christmas
%7Boption%7Ddi-FF1G.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="632">

New Year
%7Boption%7Ddi-NJR4.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="552">

And of course you can also create a lot of your own interface... all with ZuzuSkin

Here's some other custom interfaces

SKIN CONFIGURATION
%7Boption%7D

On the general layout:
You can change font, forum width, sidebar width, sidebar's position (left or right)
%7Boption%7Ddi-MTZA.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="652">

===============

%7Boption%7Ddi-70CK.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="491">


===============
Enable/Disable Quick Login Box
%7Boption%7Ddi-HOZL.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="289">



===============
Logo Text
%7Boption%7D


===============
Social links
%7Boption%7Ddi-B86E.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="134">


===============
UserInfoPanel Horizoltal or Vertical
%7Boption%7Ddi-0R9H.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="245">

%7Boption%7D


===============
Can move header Bar to the bottom
%7Boption%7Ddi-PCDI.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="678">

===============
And you can edit the color of the skin include: background, maintitle, border, header bar, menu bar...
%7Boption%7Ddi-CA9P.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="661">

===============

%7Boption%7Ddi-QWGQ.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="639">

===============

%7Boption%7Ddi-NTL5.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="634">

File Includes:
XML Files
Instructions



here to download this file

Link to comment
Share on other sites

  • Replies 203
  • Created
  • Last Reply

Very nice skin



but it is not fully compatible with Right to Left language so many conflicts appeared in the forum and topics




Hi Dr.Abdulaziz,
After checking I have discovered the defect is due to 2 functions: Edit sidebar width and UserInfoPanel Horizoltal.
And I have fixed the error in topicview . Please re-download the skin and re-import it to fix.

Because the 'Right to Left language' only affects the files .css, but some features as "Edit Sidebar Width" using css style directly in templatebit. So now I have not found any good solutions for the 'Right To Left Language' and Normal language ....On the board index error, you can edit manually by go to
ACP -> LOOK & FEEL -> Zuzu Skin -> Board Index -> Index Template -> boardIndexTemplate to remove this code:

<style type='text/css'>

.ipsLayout_largeright.ipsLayout_withright { padding-right: {$zuzuSidebarWidth_marginpadding}px; }

.ipsLayout_largeright.ipsLayout .ipsLayout_right { width: {$zuzuSidebarWidth}px; margin-right: -{$zuzuSidebarWidth_marginpadding}px; }

.ipsLayout_largeleft.ipsLayout_withleft { padding-left: {$zuzuSidebarWidth_marginpadding}px; }

.ipsLayout_largeleft.ipsLayout .ipsLayout_left { width: {$zuzuSidebarWidth}px; margin-left: -{$zuzuSidebarWidth_marginpadding}px; }

#toggle_sidebar {

	{$sbposcur}: -5px;

}

#board_index.no_sidebar { padding-{$sbposcur}: 0px; }

#board_index.force_sidebar { padding-{$sbposcur}: {$zuzuSidebarWidth_marginpadding}px; }

</style>



So, boardindex will not be in error and you can not use the Sidebar width Setting in Skin Configuration. But you can change it in ipb_styles.css easily.

Thank you for using my skin.

Link to comment
Share on other sites


Hi -



What is the Disney character mouse icon that you have in one of the display images for this skin? What does it do?



Also, got a private question, sending you a pm now.



- Brian



This is (TB) Mood, it allows members to choose the mood icon.
Now, checking your PM :)
Link to comment
Share on other sites


Very nice skin



but it is not fully compatible with Right to Left language so many conflicts appeared in the forum and topics



Hi Dr. Abdulaziz
I am pleased to inform you that I just released version 1.0.1. With this version, all your problem are solved. Now this skin compatible with "Right To Left Language", and you do not need to edit template bit as my instructions above.


Hi -



Another question: does your skin offer breadcrumbs? I don't see them in the sample images.



Thanks,



Brian



Hi Brian,
This skin uses default navigation forums.
%7Boption%7Ddi-NN5Z.png' alt='' class='ipsImage' wid" alt="" class="ipsImage" width="1000" height="298">
Link to comment
Share on other sites

Hi,

I have purchased this skin and it works really nice. I would like to add a google ad directly below the menu tab buttons (Forum | Members | Gallery, etc.) and the first header bar. I don't want to use the IPB "Ad Code Integration" tool since I am using that for something else.

What I want to do is place the code somewhere in the template so that it can appear everyone (topic view, forum index, etc.).

Thanks for the help

Link to comment
Share on other sites


Hi,



I have purchased this skin and it works really nice. I would like to add a google ad directly below the menu tab buttons (Forum | Members | Gallery, etc.) and the first header bar. I don't want to use the IPB "Ad Code Integration" tool since I am using that for something else.



What I want to do is place the code somewhere in the template so that it can appear everyone (topic view, forum index, etc.).



Thanks for the help




Hi jackflash,
To add some ad code below the menu tab, you can go ACP -> Look & Feel -> ZuZu Skin -> Global Template -> globalTemplate:
Add code what you want above:

<!-- ::: NAVIGATION BREADCRUMBS ::: -->



Thank you for your purchasing!!! :laugh:

Link to comment
Share on other sites


One small thing .. is it possible to add uninstall feature for the settingGroup_zuzuskin-configuration, because if you need to delete the settings for the skin you can't do it from the ACP unless you use the phpMyAdmin and figure the setting to remove it



To uninstall this settingGroup_zuzuskin-configuration, you should put your board into dev mode.
Open /conf_global.php
Find
define ( 'IN_DEV', 0 );

and change to
define ( 'IN_DEV', 1 );

Now go ACP and remove the settings (you'll see the remove icon next to the settings). When done, change that line back to define ( 'IN_DEV', 0 ); do not do any works while in dev mode
Link to comment
Share on other sites


To uninstall this settingGroup_zuzuskin-configuration, you should put your board into dev mode.


Open /conf_global.php


Find


define ( 'IN_DEV', 0 );



and change to


define ( 'IN_DEV', 1 );



Now go ACP and remove the settings (you'll see the remove icon next to the settings). When done, change that line back to define ( 'IN_DEV', 0 ); do not do any works while in dev mode



suggestion from fellow dev(im doing this on my settings skin now) use a hook... NOBODY should have to go into IN_DEV to uninstall a skin fully.
Link to comment
Share on other sites

Version v1.0.2

  • Delete some duplicate css.
  • Use Hook for Skin Configuration. (so from now on, you can uninstall skin configure by removing the hook easily)
  • Added Enable/Disable maintitle texture.

About maintitle texture, if you choose maintitle color is: 3DD1F1
Disable Maintitle Texture:
%7Boption%7D
Enable Maintitle texture:
%7Boption%7D
Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

OK, I really liked that skin so much specially with all the compatibility you made for RTL, can I give a suggestion if it can be applied as a new feature ?



Is it possible to make the board view changing from list to blocks like cielo skin (skinbox skin)



I think it's really necessary, because you can re-arrange sidebar block easily in ACP - manager hook. However, I will try your suggestions if possible :)
Link to comment
Share on other sites

  • 2 months later...

I see that you can specify the width of the forum and the width of the sidebar but does that mean the same as a fixed width layout? That is what I would like.



Thanks.



Hi,
About the forum's width, you can use % or px (use px if you want fixed layout). And only 'px' for sidebar's width.
Link to comment
Share on other sites

  • 4 weeks later...

Loving this skin. Two questions, please.



1. How can I change the color of the time that something was posted?



2. How can I move the announcements back to above where the pinned topics are?




1. give me the screenshot of the position of the time you want to change color.

2. go to ACP -> Look & Feel -> ZuzuSkin -> Forum View -> ForumIndexTemplate

Find and remove:


<if test="hasannouncements:|:is_array( $announce_data ) AND count( $announce_data )">

<table class='ipb_table topic_list hover_rows' summary='{$this->lang->words['forum_topic_list']} "{$forum_data['name']}"' id='announcements'>

<foreach loop="announcements:$announce_data as $aid => $adata">

<tr class='row2 announcement' id='arow_{$adata['announce_id']}'>

<td>

<php>$_seoTitle = $adata['announce_seo_title'] ? $adata['announce_seo_title'] : "%%{$adata['announce_title']}%%";</php>

{parse replacement="t_announcement"}

<h4>

<a href="{parse url="showannouncement={$adata['announce_id']}&amp;f={$forum_data['id']}" seotitle="{$_seoTitle}" template="showannouncement" base="public"}" title='{$this->lang->words['view_announcement']}'>{$adata['announce_title']}</a>

</h4>&nbsp;

<span class='desc'>{$this->lang->words['posted_by']} {parse template="userHoverCard" group="global" params="$adata"}

<if test="announcedates:|:$adata['announce_start'] AND $adata['announce_start'] != '--'">, {$adata['announce_start']}</if>

</span>

</td>

</tr>

</foreach>

</table>

<br /> 

</if>

And Find:

<!-- BEGIN TOPICS -->

Add above:


<tr>

<td colspan=6>

<if test="hasannouncements:|:is_array( $announce_data ) AND count( $announce_data )">

<table class='ipb_table topic_list hover_rows' summary='{$this->lang->words['forum_topic_list']} "{$forum_data['name']}"' id='announcements'>

<foreach loop="announcements:$announce_data as $aid => $adata">

<tr class='row2 announcement' id='arow_{$adata['announce_id']}'>

<td>

<php>$_seoTitle = $adata['announce_seo_title'] ? $adata['announce_seo_title'] : "%%{$adata['announce_title']}%%";</php>

{parse replacement="t_announcement"}

<h4>

<a href="{parse url="showannouncement={$adata['announce_id']}&amp;f={$forum_data['id']}" seotitle="{$_seoTitle}" template="showannouncement" base="public"}" title='{$this->lang->words['view_announcement']}'>{$adata['announce_title']}</a>

</h4>&nbsp;

<span class='desc'>{$this->lang->words['posted_by']} {parse template="userHoverCard" group="global" params="$adata"}

<if test="announcedates:|:$adata['announce_start'] AND $adata['announce_start'] != '--'">, {$adata['announce_start']}</if>

</span>

</td>

</tr>

</foreach>

</table>

</if>

</td>

</tr>



Save!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...