The a href links I create with CKeditor are part of h3 headings and appear smaller in font-size, from their counterpart non-link h3 text... For example, if the sentence is:
"We provide Google SEO support", and the word "Google" links to google.com, this word will appear smaller than the rest of that text (say 18px instead of 24px for the rest) and looks funny.
What can cause such a problem? what is worth checking in the text? Here is a link with a live example - You could see the problem in the second heading (h2) right away.
Thanks for you advice,
Provide CSS which format the elements as well as headings.Basically I think that your problem comes from assuming that if you format the header element in css it will affect the child elements too, it will not.
You can fix it like this:
h2, h2>a { font-size: 28px; }
This snippet causes all second headers and it's link children to have the same font size.
Related
i have to reduce size of pagination icons and fonts in order to fit into a slickgrid
attached screenshot for ref-
enter image description here
Changing the CSS style of the Pagination buttons is not going to help much, it will barely give you back couple of pixels, if you want to do that then I added a couple more SASS variables if you want to play with them
with SASS, you can lower these 2 variables (defaults are shown below, for more take a look at all the SASS variables)
$pagination-button-height: 32px; // around 28px
$pagination-button-padding: 6px 12px; // around 4px 8px
Another thing you could maybe try is to change the English translation for "items per page" and remove the word "items" (via Translations (Wiki) or Locale File (Wiki) file depending on what you use).
{
"ITEMS_PER_PAGE": "items per page" // --> "per page"
}
The last option would be to create your own Custom Pagination but that would require much more effort but someone did just that and you can see it in this Example - Custom Pagination
In UBlcok Origin I'm trying to hide the search/header bar at the top of Youtube when on a video page, but not when on the home page. It's been far trickier then I imagined because youtube not only reuses ids on the same page, but also reuses the same ids and classes on the home page as the video pages - so I thought I would try and use a procedural cosmetic filter.
So far I have:
! stop search bar from floating when scrolling
youtube.com###masthead-container.ytd-app:style(position: static !important)
! remove resulting whitespace (search bar still remains for some reason)
youtube.com###masthead-container:style(height: 0 !important)
! move video up to cover search bar but only if #content's ytd-page-manager element contains a ytd-watch-flexy element
youtube.com###content.style-scope.ytd-app:has(ytd-page-manager:has(ytd-watch-flexy)):style(position: relative; top: -56px !important)
but the last line doesn't work. So I changed it to call the custom youtube elements by id and class:
youtube.com###content.style-scope.ytd-app:has(#page-manager:has(.hide-skeleton)):style(position: relative; top: -56px !important)
and it will successfully select the correct #content element if I remove the :style(...) conditional - but, as shown, it doesn't appear to apply hide or apply the style if I chain a :style() to the :has() conditional.
Can you chain :has() and :style()?
The feature of chaining conditionals to :style() has not been added as of the end of 2019
https://github.com/uBlockOrigin/uBlock-issues/issues/382
in a Web page :
<h3 class="xh-highlight">Units Currently On Bed List</h3>
"[total beds=0]
"
i want to find xpath of total beds=0.
how can i do?
Your question and your comment are a bit contradictory. Do you want to find the text after a heading or do you want to find the element containing the text [total beds=0]? Also, how exact do you want to navigate your document?
To find a text after any h3 element you can use this: //h3/following-sibling::text()[1] (see XPath - select text after certain node).
To find a text after an h3 element with the class "xs-highlight" you can use this: //h3[#class='xh-highlight']/following-sibling::text()[1]
To be even more precise you can also look for the heading text: //h3[#class='xh-highlight' and text()='Units Currently On Bed List']/following-sibling::text()[1]
This doesn't match the html in your first comment however, so you might want to adjust the header class and text values. Also, it will find any first text even if there are other elements between it and the h3 element.
Now, your second comment makes it seem you actually want to find the element containing the text. The reason //*[text()='[total beds=0]'] doesn't work is because of the newline in the text. If you can get rid of that in the source it should match, otherwise you can "ignore" it in the xpath by using //*[normalize-space(text())='[total beds=0]']. (This is assuming the quotes around the text in your question aren't actually in the document.)
I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}
If I open the following HTML e-mail in Gmail or Outlook it renders as it should:
<img src="img.png" />
However, if I open it in Outlook and then forward it to Gmail, it adds extra garbage HTML that makes the area taller than it should be (the 'p' tag is responsible for the added height - 3px specifically):
<p class="MsoNormal">
<span style="font-size:10.0pt">
<img src="img.png">
<u></u>
<u></u>
</span>
</p>
There are lots of solutions for fixing spacing issues in Gmail, like adding display:block to the image, setting the font-size and line-height to 0, etc. I've tried over a dozen methods and none have worked because of behind the scenes HTML modification that I have no control over - styles and attributes getting stripped, tags with their own properties getting added, etc.
Is there is a work around to allow the original formatting to always be preserved? I will gladly provide any additional details needed, just let me know.
There is no fix for this, but there are ways to limit and hide the size of the separation. I'll refer to it as separation, but it is really the top cell expanding due to Outlook applying the mso-normal p tag. Here is a related article.
Between tables creates a bigger gap (about 15px) than between table rows (2px). It is more complex, but try and put everything that you can't afford separating into one big table. Colspans and rowspans can be complex, but they work if set up correctly.
To hide the separation, wrap all the tables in a master-content table with the bgcolor set. For example, make one big content pane set to white. When sending from Outlook, all your child tables will then move, but the gaps will remain white, stopping unwanted lines appearing in your email body.
A trick for footers - As the last child table of your main white panel, when this separates, it will create a white line underneath it. Either remove the footer table from the main panel or set the cell bgcolor to the same as your email background to hide this separation.
I managed to change this situation by changing the MsoNormal class
<style>
td p.MsoNormal {margin: -4px !important}
/* ou */
.MsoNormal {
margin: -4px !important;
}
</style>