Avatar of Eduardo Fuerte
Eduardo Fuerte
Flag for Brazil

asked on 

How to correctly deal with this site's visual identity changes?

Hi Experts!

I'm facing a challenge in change site's visual identity accordinlgy with:

The current header is:

 img001
Basically, obtained by using a clean basic bar:

img002
Then a css is configured to configure the contents appearence:

body {
	margin: 0;
}
#barrasp_global * { margin: 0; padding: 0; }

/*********** Barra Global 100% ***************/
#barrasp_global {
	width: 100%;
	background: #fff url(../img/img002.gif) no-repeat center top;
	text-align: center; 
	font-family: Arial, Helvetica, sans-serif;
	
}

#barrasp_global a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	background-color: transparent;
	text-align: left;
}
...

Open in new window


And after a html  that then uses the css bellow, giving the header bar funcionalities:

	<div id="barrasp_global" class="nomereceita">
		<div id="barrasp_nav">
			<ul>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Portal do Governo</a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Cidadão</a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Investe </a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Global</a></li>
			</ul>
            

<! -- Select box part -->

            <form action="http://www.xxxx.xx.xx.xx/xxx/js/selectbox_goto.php" method="post" onsubmit="return send(this)">-->
            <form action="" method="post" onsubmit="return send(this)">
				<fieldset class="field">
					<p><label for="selectbox_goto">Destaques:</label>
						<select name="selectbox_goto" id="selectbox_goto">
							<option value="null">Destaques:</option>
							<option value="http://www.www.xxxxx.xx.xx.xx/sis/noticias.php">SP Notícias</option>
							<option value="http://www.www.xxxxx.xx.xx.xx/">Poupapo</option>

Open in new window


Now I'm having to adapt to another visual identity:

img003
By using links and a button  list

 img004
So I'm going to eliminate the texts and put  "text links" with the same fonts type and dimensions and then a button that opens a selection box   ( how to implement the button that  load a selection box, in this case, will be another question, then)

I'm not secure in how to deal with this situation, if I'm going the correct way, since it's something very new to me, could you give me assistance and guidance ?

Thanks in advance!
CSSHTMLPHPjQueryWeb Development

Avatar of undefined
Last Comment
Eduardo Fuerte

8/22/2022 - Mon