Problems with conversion from theme.res to thema.css - css

I have an app for the 2018 World Cup calendar and I want to update it to 2022. I ran into a couple of problems:
The form in the title used to show a background image and now I can't get it to appear. I have tried with tbMenu.getTitleComponent().setUIID("TitleArea"); and it does not work.
TitleArea {
background-image: url(images/rojo.png);
background-color: red;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also put buttons that change when pressing a forward or back command and now it only shows the first time and when I press the command the area appears blank.
Try "tbMenu.setTitleComponent(cnP);" which works for the first time but it doesn't update when i press the command.
I appreciate the support
Hi,
I have placed an image in drive because stackoverflow sends me an error when trying to place it. https://drive.google.com/drive/folders/1LVBZPMCTTTEZxEYfwrh3S2_fPzyktTiN
As you can see, I tried several combinations and not from what I deduced the problem is about the title area because in certain parts it works. I copy the changes I made to the CSS and the image shows the result in the hope that it will tell me which is the correct way.
Title {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: red;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
TitleArea {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCommand {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCustom {
background-color: transparent;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also include the method where I load the titles for the first time.
final Toolbar tbMenu = new Toolbar();
this.setToolBar(tbMenu);
Vector vGP = grupoResultadosActivos("A");
Container cnP = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label lbTitulo = new Label("GRUPO A");
lbTitulo.setUIID("Title");
cnP.addComponent(lbTitulo);
if (vGP.size() > 0) {
int cnt = contadorBarraPaises(vGP);
if (cnt > 0) {
cnP.addComponent(cargaBarraPaises(vGP, cnt));
}
}
cnTitleArea.add(cnP);
cnTitleArea.setUIID("TitleCustom");
tbMenu.setTitleComponent(cnTitleArea);
tbMenu.repaint();

It's hard to tell with things like this. I suggest using the component inspector and reviewing the components in the hierarchy to see what went through then editing the CSS dynamically to see the changes.
Important: sometimes changes don't apply in this way!
You will need to stop the simulator and delete the res file. Then do a clean build. It's rare but it happens in some configurations and might be misleading.
About the specific issues. For the first try adding:
cn1-background-type: cn1-image-scaled-fill;
setTitleComponent is problematic since it overrides the entire title area. Many generic behaviors will stop working if you do that. It's an all or nothing situation and might be the reason other things don't work.

Related

Basic CSS styles not applying

I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }

QPushbutton How to remove the color created by setDefault(True)

I'm currently try to custom my QPushButton in Qt (PyQt in fact). So I set StyleSheet to do it.
But the problem is that I need to set this button to Default by setDefault to True.
And if I do that, I've a sort of color drool over ... how can I get rid of it?
Here is an example:
button = QPushButton('login')
button.setDefault(True)
button.setObjectName('login')
button.setStyleSheet(
"""
QPushButton#login {
background-color: #4caf50;
color: white;
border: none;
}
QPushButton:pressed#login {
background-color: #59b75c;
}
"""
)
Button appears green, but text is not fully white... I've try to set StyleSheet on QPushButton:default But it does not change anything at all
I can see you have a small error in your code. you gave us
QPushButton:pressed#login {
background-color: #59b75c;
}
but this does not work.
The correct way to do it is
QPushButton#login:pressed {
background-color: #59b75c;
}
also, be sure that after the '#' you use the objectName of the pushButton and not the text of the button.
Here is a link with some styleSheet examples
After long searches on the internet, I finally found how to do. I've to set outline to none to remove it.
QPushButton#login {
background-color: #4caf50;
color: white;
outline: none;
}
Then slobbery color disappear.

How to merge multiple CSS rules from duplicated selectors?

Precursor:
Under normal circumstances, I would never do this.
I have a CSS file that I am currently collaborating on with another person. I built the file initially, then they have added rules to it after the fact. But, instead of adding rules to selectors that already exist, they have duplicated selectors everywhere. I don't even want to get into how disorganized the file has become. The problem is that the duplicated selectors are spread out all over the file now and it could take some time to sort it out.
Anyway, I am currently in the process of trying to clean up the file. I have tried beautify, css format, etc in my editor (ST3), which cleans up fine but still leaves the duplicate selectors. I have tried various online tools like CSS Lint, ProCSSor, Dirty Markup, CleanCSS and so far none of these tools give me the desired result.
Is there any way that these selectors can be merged by some other means instead of manually?
Here's an example of my situation, just for reference:
I'd like to turn this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
.sameClass {
font-weight: bold;
font-size: 24px;
display: inline-block;
}
into this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 24px;
display: inline-block;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
CSSO (Github project) is the tool will help you merge identical CSS classes.
It can be configured to execute some cleaning, compaction and restructuring.
Test in sandbox here : https://css.github.io/csso/csso.html
// Input
.card {box-shadow: none;}
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
.card {border: 1px solid grey;}
// Output compacted + merged
.bar,.foo{color:red}
.card {box-shadow: none;border: 1px solid grey;}
A simplistic approach would be to sort your CSS file(s) by selector. This can be done by considering each rule as a "paragraph" (meaning you will have to ensure there are empty lines between rules, and nowhere else), and then using your editor's "sort paragraph" feature, if it has one. For instance, emacs has the M-x sort-paragraphs command.
Once multiple rules for the same selector are grouped together, you can manually go in and combine them.

Adding display text to a text property?

I have a style sheet that is used to display server status text and a colored bar (green = good, red = down, yellow = maintenance).
The way I have these set up are:
#status.Normal{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/greenbar.jpg) no-repeat;
}
#status.Down{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And the way they are used is just by declaring Normal or Down in my server list xml file.
For example, if the site status was normal for a site the xml would read:
<site name="template">
<title>Title</title>
<systemStatus>Normal</systemStatus>
<networkNotes>notes etc</networkNotes>
<maintenanceInformation>
information about maintenance etc.
</maintenanceInformation>
</site>
The HTML where this is used:
<td>
<tr><td id="status"></td></tr>
</td>
The HTML reads from the "status" in the XML and the site would get the "Normal" and the green bar and show those as the status for that server based on the CSS.
Is there a way, with my current setup, to declare a new property in the css (translating to French for French users currently) where I can make the new property (for "Down") as:
#status.EnPanne{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And have the text display on the red bar be En panne instead of EnPanne?
Basically I'm trying to add a custom text attribute to the EnPanne property so that it displays what I want it to while still using the right property.
Edit:
With the solution posted by jme, I was able to produce these results.
Below is an example of what the English "Down" status will display, above is what I need to do for French display. It appears that the follow-up text is cutting off the "redbar.jpg" and preventing the bar from extending to the other end of the page.
I would assume my two options here are somehow force the redbar over the following text or somehow remove that following text so the bar can fully stretch to the end of the page?
Edit 2:
Here is the portion of the script that connects the XML with the html and CSS - specifically for the system status:
<script> <!--Loads the Status_Pages.xml file-->
var root = null;
$(document).ready(function ()
{
$.get("Status_Page.xml",
function (xml)
{
...
var status=$(root).find("systemStatus").text();
$("td#status").html(status);
$("td#status").attr("class", status);
...
});
});
</script>
How I would do this is to simply set the class attribute and allow your css to add the content, versus adding the status text into the table cell in your ajax call. So, to do this you would remove this line: $("td#status").html(status);
Then in your css you could do this:
#status{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
}
#status.Normal{
background: url(images/greenbar.jpg) no-repeat;
}
#status.EnPanne, #status.Down {
background: url(images/red.jpg) no-repeat;
}
/*Now set your messages*/
#status.EnPanne:before {
content: "Le système est en panne";
}
#status.Normal:before {
content: "Operations Normal";
}
#status.Down:before {
content: "The system is currently down";
}
Here's a fiddle demo.
If you're against the idea of not adding the text into the table cell, here is an example that uses a technique to hide the table cell text while absolutely positioning the content: demo 2. If you want an explanation of this method, let me know.
What about escaping a space?
#status.En\ Panne {...}
And in your XML normally
<systemStatus>En Panne</systemStatus>

Use hover on div to change all elements inside that div

My excuses in advance, since this seems to be a problem concerning very basic understanding of CSS and maybe also Javascript.
What I want to do is this: imagine a div which contains a h3 and a p. On hovering on the div I would like the h3 and p to change their font-weight. So far I am using this code here to change the opacity and border on hovering over the div, but I really don't know how I can refer to the two elements inside the div. I'm really sorry, but I need someone to explain it to me in very simple terms.
For example, I think those elements inside the div are called children, but I'm not even sure about that... I'm really working with all that HTML/CSS/Java stuff for the first time and try to figure things out as I go along. The tutorial sites I found so far couldn't solve my problem, therefore this post.
More background information: I'm using the "smoothgallery" script by jondesign (Jonathan Schemoul) () and am trying to bend it to my will, but that is pretty difficult if you don't have any clue how it actually works. The site I implemented the script in can be found here.
Here comes the CSS part that changes the div on hover:
.jdGallery .gallerySelector .gallerySelectorInner div.hover{
border: 1px solid #89203B;
border-left: 0.8em solid #89203B;
background: url('../../images/teaserBox_bg.jpg') no-repeat;
background-size: 100% 100%;
filter:alpha(opacity=1);
-moz-opacity:1; /
-khtml-opacity: 1;
opacity: 1;
}
This entry in the CSS file changes the settings for e.g. the h3 inside that div,
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
You may also want to take a look at the .js file that makes these classes, it can be found here.
This is probably the most important part here:
createGalleryButtons: function () {
var galleryButtonWidth =
((this.galleryElement.offsetWidth - 30) / 2) - 14;
this.gallerySet.each(function(galleryItem, index){
var button = new Element('div').addClass('galleryButton').injectInside(
this.gallerySelectorInner
).addEvents({
'mouseover': function(myself){
myself.button.addClass('hover');
}.pass(galleryItem, this),
'mouseout': function(myself){
myself.button.removeClass('hover');
}.pass(galleryItem, this),
'click': function(myself, number){
this.changeGallery.pass(number,this)();
}.pass([galleryItem, index], this)
}).setStyle('width', galleryButtonWidth);
galleryItem.button = button;
var thumbnail = "";
if (this.options.showCarousel)
thumbnail = galleryItem.elements[0].thumbnail;
else
thumbnail = galleryItem.elements[0].image;
new Element('div').addClass('preview').setStyle(
'backgroundImage',
"url('" + thumbnail + "')"
).injectInside(button);
new Element('h3').set('html', galleryItem.title).injectInside(button);
new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
}, this);
new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
},
So my question here is, if it is possible at all to change the h3 and p settings by using the hover function on the main div?
Thanks in advance! Also for negative criticism, I don't really know if I did something wrong in the way I posted this question and if I can even ask it here.
You're making this way more complicated than it needs to be. No Javascript is required to do this. Let's say you've got the following:
<div class="container">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
So you've got a container, with a header and paragraph. Let's say you want to have the header normal weight, and the paragraph in red normally, with a padded box around the whole thing. Here are your styles:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
When you hover the mouse over the , you want the paragraph and header in bold and the box border to change to blue. Add this into your stylesheet (or <style> block) below the CSS above:
.container:hover { border-color: blue; }
.container:hover h3 { font-weight: bold; }
.container:hover p { font-weight: bold; }
Note that you can save a bit of space, and make it more concise by combining the <h3> and <p> styles into one line with a comma, since they're both the same. The whole thing would now look like this:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
.container:hover { border-color: blue; }
.container:hover h3, .container:hover p { font-weight: bold; }
Remember that the "C" in "CSS" stands for "cascading": styles cascade down through both hierarchies (that is, a parent element's style also applies to a child element, unless it's got default styles like margins or whatever), and down the style sheet - that means styles you define after others will override them if they apply to the same element.
The ":hover" selector in CSS can pretty much be used on anything, with very few exceptions. I use them regularly for Javascript-free drop-down menus. You can find more on the ":hover" CSS selector here: W3Schools CSS reference on ":hover". In fact, the W3Schools site is a generally great resource for brushing up your CSS.
because short answers what we always prefer to look for:
.classname :hover *

Resources