I am having some trouble opening a page with Python requests package. The page opens fine in a browser, but the program will just hang when attempting to get the site.
import bs4, requests
link = "http://s6.mediastreaming.it:8080/"
r = requests.get(link)
data=r.text
soup = bs4.BeautifulSoup(data)
soup.prettify()
print soup
Any help understanding why this site hangs would be greatly appreciated. The code works fine with http://google.com as the link.
Edit: Added info to help. This is a site that is streaming music. I just want to scrape the part of the page that says what the current song is. That is all. But maybe the fact that the page is a music streaming site is causing the issue? I just want the text of the source. Nothing else.
Edit 2: Tried the following to see if I was indeed getting a stream rather than the page I wanted.
import bs4, requests
link = "http://s6.mediastreaming.it:8080/"
r = requests.get(link,stream=True)
filename = "testfile.txt"
with open(filename,'wb') as fd:
for chunk in r.iter_content(100):
fd.write(chunk)
Here's what I got as the output:
ICY 200 OK
icy-notice1:<BR>This stream requires Winamp<BR>
icy-notice2:SHOUTcast Distributed Network Audio Server/Linux v1.9.8<BR>
icy-name:Pig Radio - The Best Electronic & Indie Pop/Rock 24/7
icy-genre:Eclectic
icy-url:http://www.pigradio.com
content-type:audio/mpeg
icy-pub:1
icy-br:128
&Oç)goiYQŠ < 6Ê !‡À¡ö³ ‡/OFÌ)8…¨ÐU!ðiÁP¡¢ãÅ..........
When I open the page in a browser and view source I get the following:
<HTML><HEAD><meta http-equiv="Content-Language" content="en-us"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="Mon, 01 Jan 1990 12:00:00 GMT"><title>SHOUTcast Administrator</title><style type="text/css"><!--a:link {color: blue; font-family:Arial, Helvetica; font-size:9pt;}a:visited {color: blue; font-family:Arial, Helvetica; font-size:9pt;}a:hover {color: red; font-family:Arial, Helvetica; font-size:9pt; }.default {color: White; font-family:Arial, Helvetica; font-size:9pt; font-weight: normal}.ST {color: White; font-family:Arial, Helvetica; font-size:8pt; font-weight: normal}.logoText {color: red; font-family: Arial Black, Helvetica, sans-serif; font-size: 25pt; font-weight: normal; letter-spacing : -2.5px;}.flagText {color: blue; font-family: webdings; font-size: 36pt; font-weight: normal; }.ltv {color: blue; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal;}.tnl {color: black; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-decoration: none;}--></style></HEAD><BODY topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor=#000000 text=#EEEEEE link=#001155 vlink=#001155 alink=#FF0000><font class=default><table width=100% border=0 cellpadding=0 cellspacing=0><tr><td height=50><font class=flagText>U</font><font class=logoText> SHOUTcast D.N.A.S. Status</font></td></tr><tr><td height=14 align=right><font class=ltv><a id=ltv href="http://www.shoutcast.com/">SHOUTcast Server Version 1.9.8/Linux</a></font></td></tr><tr><td bgcolor=#DDDDDD height=20 align=center><table width=100% border=0 cellpadding=0 cellspacing=0><tr><td align=center><font class=tnl><a id=tnl href="index.html">Status</a></font></td><td align=center><font class=tnl> | </font></td><td align=center><font class=tnl><a id=tnl href="played.html">Song History</a></font></td><td align=center><font class=tnl> | </font></td><td align=center><font class=tnl><a id=tnl href="listen.pls">Listen</a></font></td><td align=center><font class=tnl> | </font></td><td align=center><font class=tnl><a id=tnl href="home.html">Stream URL</a></font></td><td align=center><font class=tnl> | </font></td><td align=center><font class=tnl><a id=tnl href="admin.cgi">Admin Login</a></font></td></tr></table></td></tr></table><br><table cellpadding=5 cellspacing=0 border=0 width=100%><tr><td bgcolor=#000025 colspan=2 align=center><font class=ST>Current Stream Information</font></td></tr></table><table cellpadding=2 cellspacing=0 border=0 align=center><tr><td width=100 nowrap><font class=default>Server Status: </font></td><td><font class=default><b>Server is currently up and public.</b></td></tr><tr><td width=100 nowrap><font class=default>Stream Status: </font></td><td><font class=default><b>Stream is up at 128 kbps with <B>45 of 300 listeners (45 unique)</b></b></td></tr><tr><td width=100 nowrap><font class=default>Listener Peak: </font></td><td><font class=default><b>200</b></td></tr><tr><td width=100 nowrap><font class=default>Average Listen Time: </font></td><td><font class=default><b>7h 13m 12s</b></td></tr><tr><td width=100 nowrap><font class=default>Stream Title: </font></td><td><font class=default><b>Pig Radio - The Best Electronic & Indie Pop/Rock 24/7</b></td></tr><tr><td width=100 nowrap><font class=default>Content Type: </font></td><td><font class=default><b>audio/mpeg</b></td></tr><tr><td width=100 nowrap><font class=default>Stream Genre: </font></td><td><font class=default><b>Eclectic</b></td></tr><tr><td width=100 nowrap><font class=default>Stream URL: </font></td><td><font class=default><b>http://www.pigradio.com</b></td></tr><tr><td width=100 nowrap><font class=default>Stream AIM: </font></td><td><font class=default><b>N/A</b></td></tr><tr><td width=100 nowrap><font class=default>Stream IRC: </font></td><td><font class=default><b>N/A</b></td></tr><tr><td width=100 nowrap><font class=default>**Current Song: </font></td><td><font class=default><b>Midlake - Young Bride (Cassettes Won't Listen Remix)**</b></td></tr></table><br><table cellpadding=0 cellspacing=0 border=0 width=100%> <tr><td bgcolor=#DDDDDD nowrap colspan=5 align=center><table cellspacing=0 cellpadding=0 border=0><tr><td><font class=ltv>Written by Stephen 'Tag Loomis, Tom Pepper and Justin Frankel</font></td></tr></table></td></tr><tr><td nowrap colspan=5 align=center><font class=ST><b>Copyright Nullsoft Inc. 1998-2004</b></font></td></tr></table></font></body></html>
Obviously it's this last bit of HTML that I want to scrape for the "Current Song"
How do I get just this HTML??
Edit3: Solved it! I used Wireshark to capture the GET that the browser was sending and added all the parameters I saw there to the header of my Python GET. It looks like this:
import bs4, requests, urllib2
link = "http://173.255.137.244:8080/"
filename = "testfile.txt"
payload = {'Host':'173.255.137.244:8080','User-Agent':'Mozilla/5.0 (Windows NT 6.1; rv:26.0) Gecko/20100101 Firefox/26.0','Accept-Encoding':'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8','Accept-Language':'en-US,en;q=0.5','Accept-Encoding':'gzip, deflate'}
r = requests.get(link,headers=payload)
data = r.text
soup = bs4.BeautifulSoup(data)
soup.prettify()
print soup
Moral of the story. Wireshark is cool.
It seems like the site has some approaches preventing spiders from crawling.
If there's no authentication needed to crawl a page and the spider has something wrong when crawling, then there're usually two ways to do:
Add http request headers when emitting a request which makes it like visiting the page by a web browser. Some sites usually check the User-Agent field to see if it's a spider.
Add some cookies needed when emitting a request. Some sites need some information from cookies when responding.
Apart from wireshark which is a little complex, observing the network requests and its headers by the chrome developer tools in chrome is a good choice.
Related
all!
I am developing an application which receives data from a temperature sensor and prints it dynamically in a flask-served webpage at localhost:5000.
To receive the data from the temperature sensor, an udp server is employed. The receive function is implemented inside a thread. To "real-time" print data to the webpage, socketio is employed - it all runs inside "app.py".
The problem which I am facing is the slowness to print data in the webpage. To test my code I developed an udp client (client.py) which connects to my app.py and, via user input, sends data. What I am observing is that the socket receives the data (I am able to print everything I send in client.py and everything I receive in app.py) but something between my socketio emit function and the website feedback makes this update process slow.
Am I missing something? Could you guys help me out discovering why is this process so slow in my code?
All help is much appreciated!! Many thanks!!
app.py
from flask import Flask, render_template, flash, url_for, redirect, request
from flask_sqlalchemy import SQLAlchemy
from flask_socketio import SocketIO, emit
import socket
import threading
HOST = ''
PORT = 3456
udp = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
orig = (HOST, PORT)
udp.bind(orig)
app = Flask(__name__)
app.config ['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///measurements.sqlite3'
app.config ['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = "secret!"
async_mode = None
socketio = SocketIO(app, async_mode=async_mode)
def thread_function():
last_temp = 0
while True:
temperatura, client = udp.recvfrom(5)
temp = float(temperatura)
print("Temp: " + str(temp))
print("Last temp: " + str(last_temp))
if (temp != last_temp):
socketio.emit('my_response', {'temp': temp})
print("I am here!")
last_temp = temp
udp.close()
receive_thread = threading.Thread(target=thread_function)
receive_thread.start()
#app.route('/')
def home():
# Home acts as a dashboard for the page
return render_template('index.html')
if __name__ == '__main__':
socketio.run(app)
client.py
import socket
HOST = '127.0.0.1'
PORT = 3456
udp = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
dest = (HOST, PORT)
print('Para sair use CTRL+X\n')
msg = input()
while msg != '\n':
udp.sendto(bytes(msg, "utf-8"), dest)
msg = input()
udp.close()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temperature sense</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
button {
background-color: #4180a0;
border: none;
border-radius: 8px;
color: white;
<!--- padding: 32px 64px; --->
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
<!--- margin: 4px 2px; --->
cursor: pointer;
width: 128px;
height: 64px;
}
button.button:hover{
background-color: #2a2349;
}
div {
border: 1px;
border-style: solid;
border-color: #bebbb2;
padding: 8px;
}
measurementPrint{
border: 1px;
border-style: solid;
border-color: #bebbb2;
padding: 8px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Connect to the Socket.IO server.
// The connection URL has the following format, relative to the current page:
// http[s]://<domain>:<port>[/<namespace>]
var socket = io();
// Event handler for server sent data.
// The callback function is invoked whenever the server emits data
// to the client. The data is then displayed in the "Received"
// section of the page.
socket.on('my_response', function(msg) {
$('#log').text(msg.temp);
});
});
</script>
</head>
<body>
<div>
<img src="/static/images/mentorphotonics.jpeg" class="center" alt="Mentor Photonics" width="200" height=auto />
<p>
<a href=/ ><button class=button >Realtime</button></a>
<measurementPrint>
<b>Temperature: <span id="log"></span></b>
</measurementPrint>
</p>
<p><a href=export ><button class=button >Export</button></a></p>
<p><a href=about ><button class=button >About</button></a></p>
</div>
</body>
</html>
guys
I re-studied the example from Miguel Grinberg's tutorial at https://github.com/miguelgrinberg/Flask-SocketIO and I adjusted the code.
The main issues were:
I was not using the "thread = socketio.start_background_task(background_thread)" structed, as he used with the #socketio.event
UDP's recvfrom is blocking. To solve this issue I set a timeout "udp.settimeout(0.1)" so it becomes non-blocking. However, now you should use the try;exception pair when the timeout occurs.
Regards, Fávero
I'm trying the Image Tracking example as explained here - https://github.com/AR-js-org/AR.js#get-started
I've replaced the image and video with my own and added the whole project in an Amazon S3 bucket.
When I run the html page, I get an error in the browser console "Error in loading marker on Worker 403".
I'm assuming this indicates that the NFT image is somehow not loading. There are no CORS errors, or any other unauthorized errors indicated in the console.
Things I've tried after going through some pages on stack overflow (but they didn't help)-
Initially the image I was using was very basic, so I changed to the Pinball image so that AR.js gets more descriptions.
Disabled my chrome extensions like Ad Blocker etc.
Can someone help me with what is wrong or missing for the NFT to load properly?
Here's my code -
<script
src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<a-nft
type="nft"
url="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/pinball.jpg"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/video1.mp4"
scale="5 5 5"
position="50 150 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
UPDATE:
I've changed my code to use an nft merker and a-video. But I'm still getting the same error. Here's the updated code:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<a-nft
type="nft"
url="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/peacock-nft/peacock"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-video
src="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/video1.mp4"
width="9"
height="9"
position="50 150 0"
>
</a-video>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
UPDATE2 - #Kalwalt's solution resolved my issue. Additionally, turns out the my old html file was still cached in Cloudfront. I had to invalidate that file so that the newer version is pulled from S3 bucket.
The NFT Natural Feature Tracking use "descriptors" to track a desired image. To accomplish this you need to create your own descriptors, that is a NFT marker, you have two choices:
with the online tool carnaux.github.io/NFT-Marker-Creator/ easier to do but slower
the nodejs app but you need to download or clone the repository
Follow the instructions in the Readme or my tutorial.
You are getting that error "Error in loading marker on Worker 403". because you are trying to use a jpg image as NFT marker and this is not allowed.
Moreover you are trying to load a video instead of a gltf model. If you want to load a video you should use <a-video> primitive. For the gltf supply a gltf model with extension .gltf or .glb.
The marker you are using is a .jpg image which is not what a-nft need. You need to make the NFT from your image using this Carnaux NFT Marker Creator (which takes time)
Or follow this docs for Node version AR.js NFT Marker Creator Docs
Edit: Also, you are using <a-entity gltf-model...> but with .mp4 (video).
gltf-model is for .gltf or .glb format (3D model). If you want to use video use a-video
I have a custom export of several tables and their columns in multilevel yaml format.
example extract modified with dummy values:
schemas:
- name: exports
tables:
- name: sugar
description: makes stuff sweet
active_date: 2019-01-07 00:00:00
columns:
- name: color
type: abcd
- name: taste
type: abcd
description: xyz
example: 21352352
- name: structure
type: abcd
description: xyzasaa
example: 10001
- name: salt
description: not that sweet.
makes it salty.
active_date: 2018-12-18 00:00:00
columns:
- name: strength
type: abcdef
description: easy to find
example: 2018-03-03 12:30:00
- name: color
type: abcdeffa
description: not sweet
example: 21352352
- name: quality
type: abcd
description: how much is needed
example: 10001
I need to ingest this data in hive table using some serde. I am familiar with jsonSerde but unfortunately this format is not supported and so looking for an alternate way. Can someone suggest an optimum approach? Can a regexSerde help at all with what I am trying to achieve?
Hive table Data can be represented maybe in one of the below ways:
<style type="text/css">
table.tableizer-table {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>Level 1(name)</th><th>Level 2(name)</th><th>Level 2 (type)</th><th>Level 2 (description)</th></tr></thead><tbody>
<tr><td>sugar</td><td>color</td><td>abcd</td><td> </td></tr>
<tr><td>sugar</td><td>taste</td><td>abcd</td><td>xyz</td></tr>
<tr><td>sugar</td><td>structure</td><td>abcd</td><td>xyzasaa</td></tr>
<tr><td>salt</td><td>strength</td><td>abcdef</td><td>easy to find</td></tr>
<tr><td>salt</td><td>color</td><td>abcdeffa</td><td>not sweet</td></tr>
<tr><td>salt</td><td>quality</td><td>abcd</td><td>how much is needed</td></tr>
</tbody></table>
--- or ---
<style type="text/css">
table.tableizer-table {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>Level 1(name.colum)</th><th>Level 2 (type)</th><th>Level 2 (description)</th></tr></thead><tbody>
<tr><td>sugar.color</td><td>abcd</td><td> </td></tr>
<tr><td>sugar.taste</td><td>abcd</td><td>xyz</td></tr>
<tr><td>sugar.structure</td><td>abcd</td><td>xyzasaa</td></tr>
<tr><td>salt.strength</td><td>abcdef</td><td>easy to find</td></tr>
<tr><td>salt.color</td><td>abcdeffa</td><td>not sweet</td></tr>
<tr><td>salt.quality</td><td>abcd</td><td>how much is needed</td></tr>
</tbody></table>
EDIT: Using simplest approach I was able to extract below:
$ grep -P '(?<=- name: ).*' export.yaml
- name: exports
- name: sugar
- name: color
- name: taste
- name: structure
- name: salt
- name: strength
- name: color
- name: quality
but how do I establish the indentation relationship so that result is like :
sugar.color,sugar.taste,sugar.structure
salt.strength,salt.color,salt.quality
I've tried reading the documents or search for other similar question to it in stackoverflow or online, but it's either I'm not googling correctly.I'm not sure how to remove the QRCode after it has been scanned.
Is displaying it in a < p > tag wrong?
The QR code is generated from a type string not taken from a database.
Am I required to have a database and a script running with intervals that checks whether the QR code has been read,
Am I assuming wrongly?
//in my file.ts
createCode() {
this.createdCode = this.qrData;
}
My code for displaying the scanned QR
//in my file.html
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
If there are any relating questions that you have across please do refer me to it, as I'm not able to pin point over the few hours of looking trough.
Thank you in advance!
Never mind, I just had to add span class which handles closing it.
<span class =
"closebtn" onclick="this.parentElement.style.display='none';">×
</span>
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
and in file.scss add the following to display the closing button.
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
color: black;
}
I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!