For my work I'm being asked to edit a Wordpress website but there's NO documentation and NO organization whatsoever so editing it is a nightmare.
And it relies heavily on Widgets I don't really know how to use but I can't find any info other than like sites that used it too so I'm not sure what to edit and I'm terrified on breaking the site since it's already uploaded.
For the most part all I need to do is edit the way recent news display the dates
Like, delete the "ON ___ AGO" or be able to modify it to display with different words since the site is in spanish.
[trx_widget_recent_news style="news-announce" show_categories="" category="0" count="4" orderby="date" order="desc"]
But this is all the code I have for it and nothing tells me how to edit the format of the date display.
[vc_row full_width="stretch_row" hide_bg_image_on_tablet="" hide_bg_image_on_mobile="" row_delimiter="" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="" hide_on_frontpage="" css=".vc_custom_1657334261997{background-color: #1a1d24 !important;}"][vc_column icons_position="left"][trx_widget_recent_news style="news-announce" show_categories="" category="0" count="4" orderby="date" order="desc"][vc_empty_space height="32 px" alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="1"][vc_single_image image="9793" img_size="full" alignment="center" onclick="custom_link" img_link_target="_blank" link="https://agricoladasam.com.mx/dasam/" css=".vc_custom_1658420299087{padding-top: 50px !important;padding-bottom: 50px !important;}"][vc_empty_space height="50px" alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][/vc_column][vc_column icons_position="left"][/vc_column][/vc_row][vc_row][vc_column width="2/3" icons_position="left"][vc_empty_space height="4em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][vc_empty_space height="3.5em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="1"][trx_sc_title title_style="default" link_style="default" title="Últimas Noticias" description="Del Sector"][trx_widget_recent_news style="news-announce" show_categories="1" category="56" orderby="none" order="asc"][vc_empty_space height="2.6em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][vc_column_text]%%CONTENT%%[/vc_column_text][vc_empty_space height="3.5em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="1"][/vc_column][vc_column width="1/3" icons_position="left"][vc_empty_space height="2em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="1"][vc_empty_space height="3.6em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile="1"][vc_widget_sidebar sidebar_id="sidebar_widgets" el_class="widget_area"][vc_empty_space height="4em" alter_height="none" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][/vc_column][/vc_row][vc_row][vc_column width="2/3" icons_position="left"][vc_empty_space alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][vc_single_image image="11941" img_size="full" onclick="custom_link" img_link_target="_blank" link="https://contactostihl.com"][vc_empty_space alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][/vc_column][vc_column width="1/3" icons_position="left"][vc_empty_space alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][vc_single_image image="3670" img_size="medium"][vc_empty_space alter_height="medium" hide_on_desktop="" hide_on_notebook="" hide_on_tablet="" hide_on_mobile=""][/vc_column][/vc_row][vc_row][vc_column icons_position="left"][/vc_column][/vc_row]
This is the mess I was left with, I feel someone did the block editing thingy and just left me to suffer. Lol.
If the Site Language is Spanish, the rendering of "on 21 horas ago" could be altered by changing the date/time formats in:
WP Admin > Settings > General
NB. This would affect all dates/times displayed on the site globally.
Another option would be to search for the "trx_widget_recent_news" callback function in the plugin/theme directory to see exactly how the time in the widget is rendered. Depending on what you find, you could overwrite the shortcode callback with your own or provide a translation for the function used.
Fortunately with WordPress, even when there is no documentation, you can always read the source code and use it as a guide to find your way around. Hope this helps you feel more confident - you can do it..
Related
I'd like to scrape information from the following website: https://www.theglobaleconomy.com/download-data.php
As you will see, there are info boxes associated with each economic variable, such as the one in the picture, it pops up when you click on i:
https://i.stack.imgur.com/E3JRy.png
SelectorGadget and the inspection of the code says I should use "#definitionBoxText" as the CSS selector but that doesn't work when I run nodes <- read_html("https://www.theglobaleconomy.com/download-data.php") %>% html_nodes("#definitionBoxText") %>% html_text(), I get nothing in return, just blank. Could you please guide me as to how I can get those information? Any help is greatly appreciated!
It looks like the values for #definitionBoxText are generated when you click on the information icon by a PHP script. That means you won't be able to scrape that text unless you use something like RSelenium and simulate a click on each icon.
An alternative would be opening up the developer tools by pressing F12, going to the Sources tab and saving the file called download-data.php, which contains all the definitions you are looking for. You can then scrape that file separately. Attaching below what the scrapeable part looks like:
<div class="indicatorsName">
Economic growth: the rate of change of real GDP
</div>
<div class="infoIcon">
<div class="showDefinition"
style="margin: 4px 3px 0; padding: 1px 6px 0; border-radius: 10px; border: 1px solid #333; color: #333; float: right; font-weight: bold; font-size;10px">
i
</div>
</div>
<div class="clearer"></div>
<div class="definition">
<b>Economic growth: the rate of change of real GDP</b><br /><br />
Definition:
Annual percentage growth rate of GDP at market prices based on constant local currency. Aggregates are based on
constant 2010 U.S. dollars. GDP is the sum of gross value added by all resident producers in the economy plus any
product taxes and minus any subsidies not included in the value of the products. It is calculated without making
deductions for depreciation of fabricated assets or for depletion and degradation of natural resources.
</div>
</div>
PROBLEM:
I have set the slot property for the ion-tab-bar to "bottom", however the ion-tabs seem to position themselves inside an ion-card element and when scrolling through the ion-card content to read more, the tabs scroll with the content.
I have tried using CSS to make the ion-tabs position: fixed, but that stops the content scrolling altogether (Cannot read all of ion-card contents).
Does any one know a fix for this? Any help is appreciated, thanks.
BACKGROUND:
CLIP OF PROBLEM: https://streamable.com/m650o
about.page.html:
<ion-content>
<ion-card class="aboutcard">
<ion-img src="assets/pic1.jpg"></ion-img>
<ion-card-header>
<ion-card-title>About Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<ion-card-content>BOUTIQUE Immigration Lawyers of London have
‘years of specialist Legal experience at your disposal’
<br>
Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
frequently recommended by a long list of happy clients.
We are passionate about our work and dedicated to achieving life-changing results.
<br>
OUR PROMISE
<br>
“If you come to BOUTIQUE, you will get the result you want.
If there is a way, we find it and do it for you.
If there is no way we tell you, and don’t waste your time.
Where there is a way, we will deliver.”
Lawrence Lupin – Founding Director
</ion-card-content>
</ion-card>
<ion-tabs slot="fixed">
<ion-tab-bar slot="bottom">
<ion-tab-button class="activeTab">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()" class="adjustHeight">
<ion-icon name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button (click)="contact()" class="adjustHeight">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
Update: Fixed this.
To fix you need to put the ion-tabs outside of the ion-content, and wrap it in an ion-toolbar.
This way the ion-tabs are separate from the content and by wrapping it in to an ion-toolbar you reduce the "click-zone" as ion-tabs "click-zone" takes up the whole page and can lead to other issues such as (click) events not firing.
Best of luck to whoever sees this.
My placemark icon, used via HREF from google mapfiles, seems to "drift" when I zoom out. In this example the placemark can make it all the way up to Norway.
It seems that Bing maps V8 doesn't support the kml which supposedly could help the icon to understand where its center is so that it would stay anchored in the map during zooming out. Additionally, the placemark is ignoring the color style. If I remove the everything between the tags and just use the default placemark from Bing, the colors and zoom work correctly. Do any of you know of a way to get this Google icon to stay anchored via KML in Bingmaps? My current workaround is simply not to use the Google icon, and instead use the default Bing maps icon, which works. Using code to do it on the bingmaps object would require too much refactoring at this time.
You can use the Bing "drag and drop" here with my code to see the problem - just paste the KML below into the "XML Panel" and click "Read XML". Then zoom out to see the placemark go traveling. If you remove the whole node, the zoom and colors work (but with the default icon).
https://bingmapsv8samples.azurewebsites.net/#GeoXml%20-%20Drag%20and%20Drop
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Style id="model_normal">
<IconStyle>
<color>FF00FF00</color>
<scale>1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
</Icon>
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction" />
</IconStyle>
<LabelStyle>
<color>0000FF00</color>
</LabelStyle>
<LineStyle>
<color>7F00FF00</color>
<width>3</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>7F00FF00</color>
</PolyStyle>
</Style>
<Placemark>
<name>Example placemark</name>
<description></description>
<visibility>1</visibility>
<styleUrl>#model_normal</styleUrl>
<MultiGeometry>
<Point>
<coordinates>7.003930,53.361905</coordinates>
</Point>
</MultiGeometry>
</Placemark>
</kml>
The anchor format that Bing Maps expect is in pixels, so you can update the hotSpot in IconStyle to:
<hotSpot x="32" y="32" xunits="pixels" yunits="pixels" />
By default custom pushpins on Bing Maps are anchored at bottom center - that's why the "shifting" is observed.
I am making a website for Family Guy, I have their picture as the background of the homepage. Now, I want when I click anywhere on Stewie(on the background) to activate a hyperlink and go to Stewie's webpage and same thing goes for the others, what language could I use for that?
CSS, HTML5, JQuery?
Or if the background could be like black and the family members could be pictures but still, I want to activate the hyperlink when I go over the family member and not the empty space around their heads etc.
You should use an image map. Here is an example from W3 Schools:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
http://www.w3schools.com/tags/tag_map.asp
There are also some tools out there to assist with mapping the areas. They should be easy to Google.
I have a custom map of the USA with about 20 polygonal hot spots. I would like a box to pop up next to each hot spot on hover, with text and links drawn from my DB specific to the location. I would have thought this is a common situation, but I can't find a solution that works. I tried using an asp:imagemap and an ajax popup extender but you can't assign IDs to hotspots and it doesn't support mouseover events. I tried css with an html image map but I can't figure out how to use css solutions with polygonal hot spots, and I also don't know how to link it to get the data from the db without asp targets (I'm not very familiar with jquery, which would work, I am guessing). Anyone know of any simple-ish solutions out there?
I don't see why this is any different than creating a popup in any other context. There are a number of ways to attach "data" to an area element. The simplest I can think of is to use the alt attribute.
Check out this demo for example. (Code below.)
HTML
<body>
<p>Hover on the sun or on one of the planets to get its info:</p>
<div id="map">
<div id="overlay"></div>
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" />
</map>
</body>
JS
$('area').each(function(){
var area = $(this),
alt = area.attr('alt');
area.mouseenter(function(){
$('#overlay').html(alt);
}).mouseleave(function(){
$('#overlay').html('');
});
});
CSS
#map {
position: relative;
}
#overlay {
position: absolute;
background: #000;
color: #fff;
top: 20px;
left: 20px;
}
No AJAX calls, but those could easily be added to the mouseenter and mouseleave event s of each area element.
This requires a javascript solution (with data of course supplied server-side). Have you seen Using JQuery hover with HTML image map yet to get you started?
In fact, the provided answer provides a link to http://plugins.jquery.com/project/maphilight and a demo at http://davidlynch.org/js/maphilight/docs/demo_usa.html. It's not exactly what you're looking for, but it's close.
I'd be happy to point out how to best integrate your server-side data with your client-side map highlighting, but would need more info.