I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq
Related
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
I have the following code on my server:
<p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element is created on a new line when on a wordpress page.</p>
This produces what I want to see - no line breaks:
However, on my wordpress site using Optimizepress "custom HTML element" this produces line breaks before and after input element:
Any suggestions?
This piece of code that you have provided will generate the output as you expect it. However, there are chances that some other css properties are being applied to input tag.
You can inspect element and check the property that is being applied to it. In wordpress, when we save our page, many a times the structure change. So do re check.
Please provide more information if you want me to go indepth. Hope this resolves your issue.
I ended up playing with the [margin], [padding] and [display] settings by including them in the elements style. It was the [display: inline] that seemed to do it.
<p>This is a test to determine why the
<input type="text" style="text-align: center; width: 100px; margin: 0px; padding: 0px;
display: inline;" value="input"/>
element is created on a new line when on a wordpress page.</p>
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
Basically, my problem is pretty straight forward. Currently, the way magento displays products in list view is far too large for my needs. It utilizes a much larger image than I'd like, and each product listed takes up a large amount of space. What I would like is to resize the listing so that each product is basically a single line or two that includes a very small thumbnail image on the left, the title, the short description and finally the price. If I can list my products this way, many more will be able to fit on a single page in a concise manner (which is what I need).
For reference, the way the site currently displays products in list view can be seen here with a couple test products: http://soundcherry.com/index.php/sound-effects.html
Is there any way for me to achieve the results I'm looking for? I'm not sure which files to modify or what exactly to change. I've been doing as much research as I can, but I'm somewhat of an amateur (especially with coding of any kind) and I haven't been able to figure it out.
Any help will be greatly appreciated. Thank you!
i was going to comment but it didn't fit
Edit both Template files and css files
for example on style.css
(which is here on your host http://soundcherry.com/skin/frontend/default/f002/css/styles.css)
on line 799 change padding:12px 10px; to padding:1px 2px;
then hard refresh (Ctrl+F5) and see the result
or on the same file on line 801 you can change margin:0 0 10px; to margin:0 0 2px;
and change width and height to width:80px; height:80px;
you can also add a line after line 801 to force resize those images like this:
.products-list .product-image img { width:80px; height:80px; }
but you should change < img > dimension in your Template files,
search for your template folder and when you find the file edit width= and height= in < img > tag
NOTE If you're using Firefox right-click on where you want to change and click Inspect Element, interact with the left box to select the element you want visually and then you will find out which line is that class or id on the right box of Inspector, id is unique and is shown by #id_name { } and class is shown like this .class_name { }
EDIT after comment
for that you should edit your template files, (they are html files with .Phtml file extension located im /template/ folders) find the file you need to change and change it
check this page out as it have many useful information
Click Here
EDIT 2
i have worked with other systems but not magento
i don't know which file exactly it is i think it might be products.phtml or something in your template folder
the code is something like this
<div class="f-fix">
<h2 class="product-name">{$title}</h2>
<div class="price-box"><span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span></div>
<p class="availability out-of-stock"><span>{$availability}</span></p>
<div class="desc std">{$desc}Learn More
</div><ul class="add-to-links"><li>Add to Wishlist</li>
<li><span class="separator">|</span> Add to Compare</li>
</ul>
</div>
as < div > and < p > tags (which may appear such as < div class="desc dtd" > ) are block elements, you should either apply style="display:inline-block" to them this can be applied like this
<p class="availability out-of-stock" style="display:inline-block">
or you can apply a new class by space to current tag like this
|HERE|
<p class="availability out-of-stock new_class">
and then define this class in your style.css like this
.new_class { display:inline-block; }
or remove the < div > < /div > and < p > < /p > tags to make them all apear in a single line, something like:
<div class="f-fix">
<h2 class="product-name">{$title}</h2>
<span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span>
<span style="availability out-of-stock">{$availability}</span>
{$desc}Learn More
<a class="add-to-links" href="{$wishlist}" class="link-wishlist">Add to Wishlist</a>
<span class="separator">|</span> Add to Compare
</div>
i think maybe it is a little soon for you to edit such scripts templates, please consider reading html and css tutorials and the page i gave you first
HTML Toturial
CSS Toturial
Plus this Magento design guide:
Magento Design Guide
i know it is not fun at the moment , but trust me its SO EASY (but you're trying to start with a complicated script and template, please google for simple examples to start learning CSS and HTML) and once you've learned CSS and HTML you will enjoy them so much
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp