WebSite X5Help Center

 
Ian S.
Ian S.
User

CSS Code Editting and Changes  en

Author: Ian S.
Visited 4081, Followers 2, Shared 0  

I need to alter the CSS code on a number of pages.  I need to change for one cell the Overflow and z-index.  When I export the website I can go in to the CSS code and make the changes manually but I lose them if I make any other changes to the site and export again.  How can I stop these changes reverting back or how can I put my CSS code in the Expert tab on the HTML Cell.

Posted on the
6 ANSWERS - 1 CORRECT
Ian H.
Ian H.
User

Hi

Each time you export, you have to upload the css file with the changes you manually made

for example download the css file from inside the pcss folder to your computer do the changes on the file on the computer and upload again to the pcss folder and each time you export from x5, upload the css file again to the pcss folder

That make sense, I have done it on a few of my websites loads of times

Kind regards

Ian

Read more
Posted on the from Ian H.
Ian S.
Ian S.
User
Author

Hi Ian H.

Thanks for this but the problem with that solution is that if you change aby aspect of the web page, including headers and footers the CSS reflects this.  Hence the need for manual editing.  I agree if I were to only alter text or details of an existing cell then this would work but it is not quite what I had in mind.  There is an 'Expert' tab on the HTML cell editing screen.   I have tried using this but it only inserts code not replaces it.  Still looking for ideas.

Read more
Posted on the from Ian S.
Incomedia
Claudio D.
Incomedia

Hello Ian,

When you export the project WebSite X5 recreates all the files and so your changes will be overwritten. You can replace functions in the expert tab adding the tag !important to the css instructions that has to be executed instead of others.

Hope this helps!

Read more
Posted on the from Claudio D.
Ian S.
Ian S.
User
Author

Hi Claudio

Thank you for your response to my question, however using the !important tag does not appear to do what I need.  I understand that the CSS file for each page is created when website X5 Evolution v9 is ‘compiled’ or exported to disk.  I also understand that if a change is made to a page, the header or footer of the site then the CSS changes.  There lies my problem as there is one cell on each page where I need the CSS to be different to that that is created by Website X5.  Below is an example of the code that  Website X5 creates:

/* ----------------------------- CSS code example ------------------------- */

#imCell_1 { display: block; ... .. ...........

#imCell_2 { display: block; position: relative; overflow: hidden; width: 222px; min-height: 41px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid transparent;}

#imCellStyle_2 { position: relative; width: 216px; min-height: 35px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;}

#imCellStyleGraphics_2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;}

#imCell_3 { display: block; ..... . ...... ......

/* --------------------------- end of css code example -------------------- */

To make this cell do what I need, it displays a Facebook Like button, I need to change 2 things in the CSS code, the overflow has to be changed to visible and the z-index to 3.  These changes are necessary to display the comment box produced by the FB widget when either Like or Send is clicked on.

I also need to make a change in the HTML exported code for the lines shown below:

<!--  ----------------------------- HTML code example ------------------------- -->

<div id="imCell_2" class="imGrid[0, 0]"><div id="imCellStyleGraphics_2"></div><div id="imCellStyle_2"><div class="imHTMLObject" style="height: 35px; <b>overflow: auto;</b> text-align: center;"><!-- Social Network.Facebook Like Button: START -->

<!-- ------------------------------------- end of html code example ------------- -->

Again here the overflow needs to be changed to visible.

Any suggestions you may have to achieve these changes automatically would be appreciated.  So far I have found that adding any code in the Expert tab of the HTML Cell edit facility simply adds that code to the CSS file which is not what is required.

Thank you for your help.

Regards

Ian

Read more
Posted on the from Ian S.
Ian S.
Ian S.
User
Author

Hi Lemonsong,

Thank you very much for your response to my question.  It has solved the problem, thank you.  It would seem that I do not need the HTML code changed and when I put in your code it lost my menus.  Like one of your other followers, I too would think that Website X5 evolution 9 would have implemented this improvement for their widgets.

Have a look at www.barelancla.com/it/index/html

Anyway, thank you again for your help and I apologise for the translation below – it was done with Google.

Best wishes

Ian. S

Ciao Lemonsong,
La ringrazio molto per aver risposto alla mia domanda. È stato risolto il problema, grazie. Sembrerebbe che non ho bisogno il codice HTML cambiato e quando ho messo nel codice ha perso i miei menu. Come uno dei tuoi seguaci di altri, anch'io penso che WebSite X5 Evolution 9 avrebbe attuato tale miglioramento per i propri widget.

Dai un'occhiata alla www.barelancla.com / it / index / html

Ad ogni modo, grazie ancora per il vostro aiuto e mi scuso per la traduzione qui sotto - è stato fatto con Google.

I migliori auguri
Ian. S

Read more
Posted on the from Ian S.