Help with style

by **lokistorm** » May 13th 2011, 6:11 pm

Patrick wrote:Hey lokistorm,

Glad that that worked. What was the last post bit fixing thing again? Sorry, I can't recall and the page looks OK now.

Thanks,

Patrick

Oh no worries, it must have updated!

Thank you so much for all your help - I will definitely recommend this forum.

Would finally just appreciate your help on some finishing touches:

- How do I change the board graphics? Such as the forum graphic on the left? Is it as simple as uploading a new graphic to the database, replacing the older one?

- How do I change the board logo? Will it be the same process as above?

- This is going to sound picky - but it's kind of annoying me! If you are not logged into the forum (which you should be able to see), the space between the top right 'board index' graphic and the 'register' graphic has two horizontal separators, when there should only be one. Is there anyway to fix this without messing up the horizontal separators displayed when someone registers/logs in and there are more graphics in that top right corner?

by **Patrick** » May 13th 2011, 7:35 pm

Hello lokistorm,

Thanks for the note. Glad that we finally have things where you want them.

Regarding the graphics, yes, that is one way. If you upload them over the old ones and they are both the same dimensions, you should be fine. Otherwise, you will need to edit the appropriate files in the template or theme folder inside of the modestus folder.

For the separator issue, try this: open your overall_header.html file and find:

Code: Select all

                    <li class="faq"><a href="{U_FAQ}">{L_FAQ}</a></li>
                    <li class="separator"></li>

Replace with:

Code: Select all

                    <li class="faq"><a href="{U_FAQ}">{L_FAQ}</a></li>
                    <!-- IF S_USER_LOGGED_IN -->
                    <li class="separator"></li>
                    <!-- ENDIF -->

Hopefully that makes the change.

Thanks,

Patrick

by **lokistorm** » May 13th 2011, 8:00 pm

Patrick wrote:Hello lokistorm,

Thanks for the note. Glad that we finally have things where you want them.

Regarding the graphics, yes, that is one way. If you upload them over the old ones and they are both the same dimensions, you should be fine. Otherwise, you will need to edit the appropriate files in the template or theme folder inside of the modestus folder.

For the separator issue, try this: open your overall_header.html file and find:
Code: Select all
                    <li class="faq"><a href="{U_FAQ}">{L_FAQ}</a></li>
                    <li class="separator"></li>
Replace with:
Code: Select all
                    <li class="faq"><a href="{U_FAQ}">{L_FAQ}</a></li>
                    
                    <li class="separator"></li>
                    
Hopefully that makes the change.

Thanks,

Patrick

Strangely, I can't seem to find the faq bit. Here is the full code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />

{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: modestus
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by: RocketTheme, LLC (C) Copyright. All rights reserved.     
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<!-- INCLUDE modestus_config.html -->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>



</script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/{$DEFAULT_MODESTUS_SCHEME}.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="{T_THEME_PATH}/style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="{T_THEME_PATH}/style2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style3" href="{T_THEME_PATH}/style3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style4" href="{T_THEME_PATH}/style4.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style5" href="{T_THEME_PATH}/style5.css" />

<script type="text/javascript" src="{T_TEMPLATE_PATH}/colorswitcher.js">
/***********************************************
* 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>

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />


<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

<!--[if IE 7]>
<link href="{T_THEME_PATH}/template-ie7.css" rel="stylesheet" type="text/css" media="screen, projection"  />
<![endif]-->

<!--[if IE 6]>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/mootools-release-1.11.js"></script>
<link href="{T_THEME_PATH}/template-ie6.css" rel="stylesheet" type="text/css" media="screen, projection"  />
<script type="text/javascript" src="{T_TEMPLATE_PATH}/belated-png.js"></script>
<script type="text/javascript">
			window.addEvent('domready', function() {
				var pngClasses = ['.top_icons li a','#logo','.separator','h3','h2','.lastpost_img img','a.home','.lastpost span a img','.posts_container','.linklist li'];
				pngClasses.each(function(fixMePlease) {
					DD_belatedPNG.fix(fixMePlease);
				});
			});
</script>
<![endif]-->


  <style type="text/css">
.navbar .inner,#page-body,.headerbar .inner,.modules .inner,.solo_inner {
     width: <!-- IF $MODESTUS_FULL_WIDTH -->97%<!-- ELSE --><!-- IF $MODESTUS_WIDTH -->{$MODESTUS_WIDTH}px<!-- ELSE -->996px<!-- ENDIF --><!-- ENDIF -->;
}
  </style>


</head>
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
	
<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
                    <div class="inner">
			<div id="site-description">
				<!-- IF $ENABLE_MODESTUS_LOGO -->
				<a href="<!-- IF $MODESTUS_LOGO_LINK -->{$MODESTUS_LOGO_LINK}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="{L_INDEX}" id="logo"></a>
				<!-- ENDIF -->
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<ul class="top_icons">
                    <li class="home"><a href="{U_INDEX}">{L_INDEX}</a></li>
                    <li class="separator"></li>
                    <!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><li class="ucp"><a href="{U_PROFILE}">{L_PROFILE}</a></li><!-- ENDIF -->
                    <li class="separator"></li>
                    
                   <!-- IF S_DISPLAY_MEMBERLIST and not S_IS_BOT --><li class="members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><li class="separator"></li><!-- ENDIF -->
                    <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
                    <li class="register"><a href="{U_REGISTER}">{L_REGISTER}</a></li>
                    <li class="separator"></li>
                    <!-- ENDIF -->
                    <!-- IF not S_IS_BOT --><li class="login"><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li><!-- ENDIF -->
		    
		    <!-- IF $ALLOW_MODESTUS_COLORSWITCHER -->
		    <li class="separator"></li>
		    <li class="styles"><a href="#">{L_OPTIONS}</a> 
		    <ul class="level2">
<li class="preset"><a class="item" href="javascript:chooseStyle('style1', 60)" ><span>&bull; {L_SELECT} 1</span></a></li>
<li class="preset"><a class="item" href="javascript:chooseStyle('style2', 60)" ><span>&bull; {L_SELECT} 2</span></a></li>
<li class="preset"><a class="item" href="javascript:chooseStyle('style3', 60)" ><span>&bull; {L_SELECT} 3</span></a></li>
<li class="preset"><a class="item" href="javascript:chooseStyle('style4', 60)" ><span>&bull; {L_SELECT} 4</span></a></li>
<li class="preset"><a class="item" href="javascript:chooseStyle('style5', 60)" ><span>&bull; {L_SELECT} 5</span></a></li>
<li class="preset"><a class="item" href="javascript:chooseStyle('none', 60)" ><span>&bull; {L_RESET}</span></a></li>
</ul>
		    </li>
		    <!-- ENDIF -->
		    
                </ul>
                
		</div>	
		</div>

		<div class="navbar">
<div class="inner">
			
			<ul class="submenu">
                            <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
	<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>
        <li class="separator2"></li>
        <!-- ENDIF -->
        
	<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
        <li class="separator2"></li>
        <!-- ENDIF -->
	<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
        <li class="separator2"></li>
        <!-- ENDIF -->
			<!-- ENDIF -->
                        
                        
                        <!-- IF S_DISPLAY_SEARCH -->
		<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
                <li class="separator2"></li>
                <!-- IF S_USER_LOGGED_IN --><li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li>
                <li class="separator2"></li>
               <li> <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li><li class="separator2"></li><!-- ENDIF -->
                <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
                <li class="separator2"></li>
                <!-- IF U_MCP --><li><a href="{U_MCP}">{L_MCP}</a></li><!-- ENDIF -->
	<!-- ENDIF -->
                        
                        </ul>
			
                        
</div>
		</div>

	</div>

	<a name="start_here"></a>
	<div id="page-body">
            <p class="body_paragraph"><!-- IF $SHOW_MODESTUS_DATE --><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --><!-- ENDIF -->
             <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" style="float:<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->left<!-- ELSE -->right<!-- ENDIF -->;">{L_SEARCH_ADV}</a>
            </p>
           
            
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
  
  <div id="pathway">
		<!-- IF $SHOW_MODESTUS_PATHWAY -->
		<a href="{U_INDEX}" accesskey="h" class="home">{L_INDEX}</a> <!-- BEGIN navlinks --> <span class="navlinks"> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}" class="link_item">{navlinks.FORUM_NAME}</a></span><!-- END navlinks -->
		<!-- ENDIF -->
                
                
                  <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
            </div>

by **Patrick** » May 15th 2011, 12:32 pm

Hey lokistorm,

Thanks for sharing that. That may be the problem. Is it possible for you to take the overall_header.html file available in this package ( http://www.phpbbhacks.com/download/9199 ) and then replace your current one with that one? It's possible that that may fix the issue.

Thanks,

Patrick

by **lokistorm** » May 20th 2011, 7:43 pm

Thanks Patrick. Will tackle this next week and let you know how it goes. Have exams in a few days, so rather overwhelmed!

by **Patrick** » May 26th 2011, 12:19 pm

Cool, look forward to hearing from you. I hope that you exams went well!

Patrick

by **lokistorm** » June 9th 2011, 2:59 pm

Patrick wrote:Cool, look forward to hearing from you. I hope that you exams went well!

Patrick

Hey, back now! And they didn't go too badly, thanks.

Taken your advice and the buttons on the header are now fixed.

Almost there, if you could just help with the following that would be great:

1) I've designed a logo - how do I put it on the forum?

2) If I design buttons for when a forum is read, unread (and so forth), how would I go about replacing the current ones with the newly designed ones?

Thanks,

Scott

by **Patrick** » June 10th 2011, 12:04 pm

Hello lokistorm,

Glad to hear that about the tests.

With the logo, open overall_header.html and find:

Code: Select all

				<!-- IF $ENABLE_MODESTUS_LOGO -->
				<a href="<!-- IF $MODESTUS_LOGO_LINK -->{$MODESTUS_LOGO_LINK}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="{L_INDEX}" id="logo"></a>
				<!-- ENDIF -->

Try changing this to:

Code: Select all

				<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="pathtoyourlogo.jpg" height="0" width="0" border="0" /></a>

You will need to change pathtoyourlogo.jpg and customize the height and width attributes. We can then see if that works and adjust it from there.

The other issue is a little trickier. I may not know how to solve it, but I can find. Open your imageset/imageset.cfg file and find:

Code: Select all

img_forum_link = 
img_forum_read = 
img_forum_read_locked = 
img_forum_read_subforum = 
img_forum_unread = 
img_forum_unread_locked =
img_forum_unread_subforum =

In the default phpBB 3 style, this section looks like this:

Code: Select all

img_forum_link = forum_link.gif*27*27
img_forum_read = forum_read.gif*27*27
img_forum_read_locked = forum_read_locked.gif*27*27
img_forum_read_subforum = forum_read_subforum.gif*27*27
img_forum_unread = forum_unread.gif*27*27
img_forum_unread_locked = forum_unread_locked.gif*27*27
img_forum_unread_subforum = forum_unread_subforum.gif*27*27

27*27 represents the height and width. Go ahead and copy these section over and replace the section that same section that is in your imageset.cfg file.

You can create images that match those file names. For example, forum_unread_locked.gif. Create that image and place it in the imageset folder. If it is not 27x27, you'll need to adjust the height and width in that code.

We'll need to do something with forumlist_body.html. Can you post your current code for that file to make sure we are on the same page?

Thanks,

Patrick

by **lokistorm** » June 14th 2011, 10:15 am

Patrick wrote:Hello lokistorm,

Glad to hear that about the tests.

With the logo, open overall_header.html and find:
Code: Select all
				
				<a href="{$MODESTUS_LOGO_LINK}{U_INDEX}" title="{L_INDEX}" id="logo"></a>
				
Try changing this to:
Code: Select all
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="pathtoyourlogo.jpg" height="0" width="0" border="0" /></a>
You will need to change pathtoyourlogo.jpg and customize the height and width attributes. We can then see if that works and adjust it from there.

The other issue is a little trickier. I may not know how to solve it, but I can find. Open your imageset/imageset.cfg file and find:
Code: Select all
img_forum_link = 
img_forum_read = 
img_forum_read_locked = 
img_forum_read_subforum = 
img_forum_unread = 
img_forum_unread_locked =
img_forum_unread_subforum = 
In the default phpBB 3 style, this section looks like this:
Code: Select all
img_forum_link = forum_link.gif*27*27
img_forum_read = forum_read.gif*27*27
img_forum_read_locked = forum_read_locked.gif*27*27
img_forum_read_subforum = forum_read_subforum.gif*27*27
img_forum_unread = forum_unread.gif*27*27
img_forum_unread_locked = forum_unread_locked.gif*27*27
img_forum_unread_subforum = forum_unread_subforum.gif*27*27
27*27 represents the height and width. Go ahead and copy these section over and replace the section that same section that is in your imageset.cfg file.

You can create images that match those file names. For example, forum_unread_locked.gif. Create that image and place it in the imageset folder. If it is not 27x27, you'll need to adjust the height and width in that code.

We'll need to do something with forumlist_body.html. Can you post your current code for that file to make sure we are on the same page?

Thanks,

Patrick

Hey, logo added!

How do I get rid of the modestus logo? And how do I move the new logo up a bit?

Thanks

by **Patrick** » June 15th 2011, 1:44 pm

Hey lokistorm,

Thanks for that. Let's try this. Find:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="pathtoyourlogo.jpg" height="0" width="0" border="0" /></a>

Change to:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}"><img src="pathtoyourlogo.jpg" height="0" width="0" border="0" /></a>

Basically, you are removing id="logo". Let me know how the logo looks after you do that.

Thanks,

Patrick

Help with style

Who is online