Non user styles removed by Sitecake

editing
#1

hi @Nik - i tried your last version - but Classes that are not defined as Sitecake user styles still removed :slight_frown:

Page Manager Is Finally Available
#2

@Nik they are removed from editable tags after publishing…

#3

@pyotr what version you are working with 2.3.7? or latter?
Can you paste html code here, so I can see the structure you are using?

#4

@Nik I use sitecake-2.4.0dev-pro you’ve sent me…
Example of code:
Before:


Доставка крышек-биде по России


Осуществляется бесплатно!

            <ul class="shipping offsetTopS offsetBottomS">

After:

Доставка крышек-биде по России

Осуществляется бесплатно!

    Or

    Before:

    Выберите лучшее для Вас!

    After:

    Выберите лучшее для Вас!

#5

@Nik i didn’t find how paste code here


Выберите лучшее для Вас!


#6

Hi Pyotr,

After you have typed the code part, select it and click on the </> button in the toolbar. It will then show up in the text once published.

#7

@hitcom I tried already - ok thanks trying again ))

@Nik look please here

Before:

<div class="col-sm-12 centered sc-content">
            <h2>Доставка крышек-биде по России</h2>
            <h3>Осуществляется бесплатно!</h3>

            <ul class="shipping offsetTopS offsetBottomS"></ul></div>

After:

<div class="col-sm-12 centered sc-content">
        	<h2>Доставка крышек-биде по России</h2>
        	<h3>Осуществляется бесплатно!</h3>
        	<ul></ul></div>

Before:

<div class="col-sm-12 sc-content">
                	<h2 class="center">Выберите лучшее для Вас!</h2>
                </div>

After:

<div class="col-sm-12 sc-content">
                	<h2>Выберите лучшее для Вас!</h2>
                </div>

And your script also removes text without defined tags inside sc-content area - is it nesessary? :slight_smile: I mean ordinary text without

for example
#8

Hi @Nik - tell me please what is problem with my code - why user styles still deleted
I check new beta - the same :((

#9

Hi Pyotr,

I am simply a user of SiteCake, but defining the styles within a sc-content div is always a little tricky I think. As soon as you remove an element (for instance a H2) or want to add a new one the styles will be lost.

However, there is a way to get the result you want through user styles.

For what you want you could add the following in your CSS file:

.col-sm-12 h2.center {
text-align: center;
}

You can then select the user style ‘center’ when you’re in editing mode is SiteCake.

#10

@pyotr

Classes are not removed on h#, p, ul tags that are not edited. However, you are right on h#, p, ul tags being edited in Sitecake classes are removed. This is clearly a bug and we are working to fix it for the next update.

Plain text is not supposed to stand outside of HTML tag. This is not good for SEO too.

Thanks for reporting this!

#11

@Nik I didn’t touch or edit something inside this tags - it clears that tags when publishing anyway…

#12

The issue is fixed with the 2.4.3 update. Check it out.

#13

@Nik Thank you! It works!

#14

Hello Nik,

I am facing almost the same issue or maybe it is because of the pseudo classes, I don’t know.
Look what I have :

HTML (sub header, below the menu, introducing the content) :

			<div class="sc-content container clearfix">
				<h1 data-animate="fadeInLeft" data-delay="200">Main Title</h1>
				<span data-animate="fadeInLeft" data-delay="300">Little sentence (by the way, that I can't edit because semanticly it is not a <p> and <span> is not editable!)</span>
				<ul class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">Home</a></li>
					<li class="breadcrumb-item"><a href="#">Pages</a></li>
					<li class="breadcrumb-item active" aria-current="page">Sub pages</li>
				</ul>
			</div>

CSS (latest bootstrap):
.sc-content .breadcrumb {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem;
}

.sc-content .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #6c757d;
  content: "/";
}

.sc-content .breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.sc-content .breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.sc-content .breadcrumb-item.active {
  color: #6c757d;
}

As soon as I edit a breadcrumb, the class are removed, so I tried replacing the class path by the tags associated (this perfectly activates the user class as expected) :
.sc-content ul.breadcrumb {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem;
}

.sc-content ul.breadcrumb li + li::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #6c757d;
content: “/”;
}

.sc-content ul.breadcrumb li + li:hover::before {
text-decoration: underline;
}

.sc-content ul.breadcrumb li + li:hover::before {
text-decoration: none;
}

.sc-content ul.breadcrumb li.active {
color: #6c757d;
}

It seems to work but managing to edit it is still very hasardous (I mean I have to select words 3 times before applying the link on whole word, or sometimes the link is not added…) but the main issue is the classes are cleared, empty, or modified and even added by a fancy way ( “.not-animated” ?!), have a look of the outputed html :

  	<div class="overlay"></div>
  	<div class="sc-content container clearfix">
  	    <h1 class="not-animated" data-animate="fadeInLeft" data-delay="200">Main title</h1>
  	    <span data-animate="fadeInLeft" data-delay="300" class="not-animated">Little sentence (by the way, that I can't edit because semanticly it is not a <p> and <span> is not editable!)</span>
  	    <ul class="breadcrumb">
  	        <li><a href="linkToHome/" class="">Home</a></li>
  	        <li>
  	            <a href="linkToPage/" class="">Page</a>
  	            <br>
  	        </li>
  	        <li>Subpage</li>
  	    </ul>
  	</div>

So, from here, I tried adding my initial class to tags in the css (the dropdown menu is still there but the user style can’t be applied) the outputed HTML looks like this (look how classes are modified) :
HTML :

		<div class="sc-content container clearfix">
		    <h1 class="fadeInLeft animated" data-animate="fadeInLeft" data-delay="200">Main title</h1>
		    <span data-animate="fadeInLeft" data-delay="300" class="not-animated">Little sentence (by the way, that I can't edit because semanticly it is not a <p> and <span> is not editable!)</span>
		    <ul class="breadcrumb">
		        <li><a href="/" class="">Home</a></li>
		        <li>
		            <a href="produits/" class="">Page</a>Subpage
		            <br>
		        </li>
		    </ul>
		</div>

CSS :

.sc-content ul.breadcrumb {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem;
}

.sc-content ul.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #6c757d;
content: “/”;
}

.sc-content ul.breadcrumb li.breadcrumb-item + li.breadcrumb-item:hover::before {
text-decoration: underline;
}

.sc-content ul.breadcrumb li.breadcrumb-item + li.breadcrumb-item:hover::before {
text-decoration: none;
}

.sc-content ul.breadcrumb li.breadcrumb-item.active {
color: #6c757d;
}

Any tips would be appreciated.
Romain

PS : how can I edit the span tag, as it is not justified to replace it with a p tag from a semantic point of view (and putting a div tag makes it not editable) ?