Our loading crew is using different WYSIWYG HTML editors to prepare an offers. Unofrtunatelly the result code is usually not optimized and it demands a lot of space in our db.
Example codes:
<ul style="font-size: 13.3333px;">
<li><span style="font-size: 10pt;">qwe</span></li>
<li><span style="font-size: 10pt;">asd</span></li>
<li><span style="font-size: 10pt;">zxc</span></li>
<li><span style="font-size: 10pt;">qwer</span></li>
<li><span style="font-size: 10pt;">asdf</span></li>
</ul>
or
<span style="font-size: 13.3333px;">lorem</span>
<div style="font-size: 13.3333px;"><br></div>
<div style="font-size: 13.3333px;">ipsum</div>
is there any useful lib/script which can optimize those styles before saving it to db?
So it looks like it's the inline styles that you'd like to get rid of. There's an online tool called HTML cleaner that can do this for you: HTML Cleaner Remove Inline Styles.
Related
I am using the vue-tags-input (https://github.com/JohMun/vue-tags-input) - and now I'd like to apply the UIKit form styling to it (https://getuikit.com/docs/form).
I prepared this as an example here: https://codepen.io/spqrinc/pen/vQjRjB
This is the rendered tags-input:
<div data-v-7f2a58de="" class="vue-tags-input">
<div data-v-7f2a58de="" class="input">
<ul data-v-7f2a58de="" class="tags">
<li data-v-7f2a58de="" tabindex="1" class="tag valid">
<div data-v-7f2a58de="" class="content"><!---->
<div data-v-7f2a58de="" class="tag-center"><span data-v-7f2a58de="" class="">test</span> <!---->
</div> <!----></div>
<div data-v-7f2a58de="" class="actions"><i data-v-7f2a58de="" class="icon-undo"
style="display: none;"></i> <i data-v-7f2a58de=""
class="icon-close"></i> <!---->
</div>
</li>
<li data-v-7f2a58de="" tabindex="2" class="tag valid">
<div data-v-7f2a58de="" class="content"><!---->
<div data-v-7f2a58de="" class="tag-center"><span data-v-7f2a58de="" class="">test2</span> <!---->
</div> <!----></div>
<div data-v-7f2a58de="" class="actions"><i data-v-7f2a58de="" class="icon-undo"
style="display: none;"></i> <i data-v-7f2a58de=""
class="icon-close"></i> <!---->
</div>
</li>
<li data-v-7f2a58de="" class="new-tag-input-wrapper"><input data-v-7f2a58de="" type="text" size="1"
placeholder="Add Tag"
class="new-tag-input valid"></li>
</ul>
</div>
</div>
Now I'd like to overwrite the tag's form (the css class is not changeable) to behave just like the UIKit (Placeholder-size/font/color, Height, border, blue border on focus) just like you see in the codeine-example (input and textarea in this example). How can I do that?
I am using SASS to compile the static css - maybe I could #include the UIkit-source and use it to overwrite the vue-tags-input?
Unfortunately I don't know enough CSS and so I am very happy for an example.
Thanks in advance.
You would either #import the UIkit to your SASS stylesheet or you would make your own stylesheet that you make sure is loaded after it, either method works but by #import'ing the UIkit stylesheet you can e.g. alter variables so their code is compiled differently, but if you're not good at CSS or don't wanna learn how their project is structured so you import the right files in the right places then it would be easier to just go with you own stylesheet.
The below CSS would change the background color of the tags. If a value you change doesn't change you can try using !important tag on that value to force it to be used, just make sure your stylesheet is added AFTER the UIkit stylesheet and it'll work.
.vue-tags-input .tag {
background: #333 !important;
}
https://codepen.io/anon/pen/vQrLqm
You can place that in any CSS/SASS/LESS file and it'll change the color of the tags.
As a tip, if you right click on something in a website and press inspect it'll open the inspector where you can try adding new CSS to elements or classes and see the effects directly. I often use this to try out stuff before I recompile the CSS so I know the effects of my changes.
i am using the font awesome icon ellipsis-v (which is very tiny; see here) in a clickable row, so it's frustrating to click, because most of the time you end up clicking on the row.
i tried putting the link on the td, but it's not working (because the whole row is clickable?).
are there any css tricks to increase the clickable area around the fa-icon?
(below the code i tried)
<tr class='clickable-row' data-href='details.html'>
<td></td>
<td class="client-status"><span class="label label-warning"></span></td>
<td>
<a class="doDropdown">
<div class="ibox-tools">
<a class="dropdown-toggle doDropdown" data-toggle="dropdown">
<i class="fa fa-ellipsis-v"></i>
</a>
<ul class="dropdown-menu">
<li>
View
</li>
<li>
Edit
</li>
</ul>
</div>
</a>
</td>
</tr>
Try adding the property line-height or font-size on <i> tag:
Example:
i {
line-height: 20px;
font-size: 20px;
}
You can simply add fa-nx inside the icon class, where n is the number and it simply increases the icon's size by n times its original.
Below n is 2. You can use 3, 4.. depending on your design.
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
Ok so I have a few tables on a page and one of them is giving me trouble. It is the second table on the page The left column is how I want it, the other appears to be centering the data within the table row. I don't understand why, I don't think its CSS from the WordPress template because if I launch it as a raw HTML file in my browser it is doing the same thing. Here is the link to the resulting page with the tables (second table down): http://titanpropertymanagement.co/residents/utility-info/
I know this issue is probably super simple but I am still learning to code so I'm sure it's just missing a simple style tag. Thanks for any help you can provide :)
Here is the code for the second table giving me issues
<h2 style="text-align: center;">Water & Trash Service</h2>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<h4>Water/Trash for Lafayette</h4>
<h5><span style="text-decoration: underline">Lafayette Utility Dept.</span> - (765) 807-1100</h5>
<ul>
<li><span style="text-decoration: underline">Download Application Here
</span>
</li>
</ul>
<h5>Lafayette Sanitation - (765) 807-1411</h5>
<ul>
<li><span style="text-decoration: underline">Request Trash/Recycle Bin</span>
</li>
</ul>
<h5>Waste Management - (800) 443-5646</h5>
<ul>
<li><span style="text-decoration: underline">Request Service Online</span>
</li>
</ul>
</td>
<td width="50%">
<h4>Water/Trash For West Lafayette</h4>
<h5><span style="text-decoration: underline">American Water</span> - (800) 492-8373</h5>
<ul>
<li>Request New Service Online
</li>
</ul>
<h5>W. Lafayette Sanitation - (765) 775-5242</h5>
<ul>
<li>Request Service Online
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Add
tbody {
vertical-align: top;
}
to your stylesheet. This will override the browser's default styling of tbody, which is to vertically align the tbody to the middle (at least in Chrome).
I am using TinyMce to compose emails then I am saving emails in database. There need to open email in read only mode as well. Top show mail just in readonly mode I inserted email tags in a div but in display inserted text was not begin shown as a display of HTML tags, rather tags where there in div. I am using div.InnerHtml to add email HTML but div is showing tags like:
<p>
<strong>hi,</strong>
</p>
<div>
<span style="color: #800000;">
Since the application that he demands require information gathering,
screen designing and development, I have forwarded the project to the team
I am working with.
</span>
</div>
<div><br /></div>
<div>
<span style="color: #ff6600;">
<strong>
<span style="font-size: medium;">Thanks,</span>
</strong>
</span>
</div>
<div>
<strong>
<span style="font-size: medium;"><br /> </span>
</strong>
</div>
<div style="text-align: right;">
<span style="font-size: medium;">
<em>
<span style="text-decoration: underline;">
<span style="color: #339966;">Mr. Bota</span>
</span>
</em>
</span>
<br />
</div>
You should use an asp.net Literal control, and set the LiteralMode to `PassThrough'. You can read a bit more here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.literalmode.aspx.
This should allow the HTML you emit to actually be rendered, instead of seeing the tags.
Use a literal control for this:
<asp:Literal ID="litEmailBody" runat="server" />
And in the code behind:
litEmailBody.Text = htmlContent; //your HTML markup